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

Contents hide

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

1.6 Now is the magic part – Ajax.js file

2 Other Important Topics

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), name(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.