CSS in HindiHTML in HindiJavaScript in HindiPHP in HindiProgramming Language

Simple Google Suggestion Box Using jQuery, Ajax, PHP & MySQL

Project Name – Simple Google Suggestion Box Using jQuery, Ajax, PHP & MySQL

Solution

  • Database Name – ajaxtodo
  • Table Name – details
  • 4 Field – id(int, auto_increment, primary), user(varchar, 255), address(varchar, 255), phone(varchar, 255)

Index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Google Suggestion - By Hindialerts.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 d-flex flex-column justify-content-center align-items-center" style="height:100vh">
                <a href="https://hindialerts.com" target="_blank"><img class="img-fluid mb-3" src="https://hindialerts.com/wp-content/uploads/2018/09/75.png" alt=""></a>
                <div class="search-box">
                    <input class="form-control" type="text" name="search" id="search" placeholder="Enter Your Search Term" autocomplete="off">
                    <span class="suggestion" id="suggestion"></span>
                </div>

            </div>
        </div>
    </div>

    <!--add jquery-->
    <!--add bootstrap.js-->
    <!--add ajax.js file-->

    </body>

</html>

style.css

.form-control{
    width:30vw;
    border-radius: 25px;
    padding:.75rem 1.25rem;

}
.form-control:focus{
    border-color: #ddd;
    border-radius: 25px;
    box-shadow:none!important;
    
}
.list-group-item:last-child{
    border-top:none;
    border-radius: 0px 0px 25px 25px !important;
}
.list-group-item:first-child{
    border-top:none;
}
.list-group-item:hover{
    background: #eee;
}
.list-group-item:not(:last-child){
    border-bottom:none;
    border-top:none;
}
ul{
    margin-top: -5px; 
}

db.php

<?php

$conn = new mysqli('localhost', 'root', '', 'ajaxtodo');

if ($conn->connect_error) {
    die("Connection Failed");
}

search.php

<?php
//including db.php file for database connection
include 'db.php';

$search = $_POST['search'] ?? "";

//query for selecting data from our database
$query = "SELECT * FROM details WHERE name LIKE '%$search%'";

//execute query
$result = $conn->query($query);
$opt = "<ul class='list-unstyled list-group'>";
//checking result that should be more than 0
if ($result->num_rows > 0) {

    //looping our data till the last on our database
    while ($row = $result->fetch_assoc()) {
        $opt .= "<li class='list-group-item'>{$row['name']} - <span class='align-content-end'>{$row['address']}</li>";
    }
} else {
    $opt .= "<li class='list-group-item'>No Result Found</li>";
}

$opt .= "</ul>";

echo $opt;

Now is the magic part – Ajax.js file

$(document).on('keyup', '#search', function () {
    let search = $(this).val();
    if (search.length > 3) {
        $.ajax({
            url: 'search.php',
            data: { search: search },
            method: "POST",
            success: function (res, text) {
                $("#suggestion").html(res);
                $("#search").css({
                    borderRadius: "25px 25px 0px 0px",
                    borderBottom: "0px",
                })
            }
        })
    } else {
        $("#suggestion").html('');
        $("#search").css({
            borderRadius: "25px",
            borderBottom: "1px solid #ddd",
        })
    }
});

This is only for learning purpose that you can understand easily. but you can make only one or two php file for making your project as small as possible. If you get any error or want to something new to learn share details below.

Other Important Topics

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close