Ajax PHP MySQL Creating Autocomplete Search Suggestion

Snippet Contents

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Ajax PHP MySQL Creating Autocomplete Search Suggestion

In this Post We Will Explain About is Ajax PHP MySQL Creating Autocomplete Search Suggestion With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to jQuery Autocomplete Search using PHP, MySQL and Ajax
Example

In this post we will show you Best way to implement Search Suggestion Functionality with PHP and MySQL, hear for Creating Autocomplete as well as Search Suggestion Functionality with PHPwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Ajax Live Database Search

We can create a simple live database search as well as feature utilizing the Ajax with PHP, where the simple search live_results_searchs will be some records displayed as we start typing some like character in search form input box.

In this POST we’re going to make a live search box that will search the students table and show the live_results_searchs data asynchronously. so, first of all we need to make this table.

Phase 1: Making the Database Table

CREATE TABLE students (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);

Phase 2: Making the Search Form

simple Create a PHP file named “search-form.php” and put the following some source code inside of it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pakainfo.com - PHP Live MySQL Database Search</title>
<style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /*Devloped By Pakainfo.com Formatting search box */
    .live_searchBox{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .live_searchBox input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .live_results_search{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .live_searchBox input[type="text"], .live_results_search{
        width: 100%;
        box-sizing: border-box;
    }
    /*Devloped By Pakainfo.com Formatting live_results_search items */
    .live_results_search p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .live_results_search p:hover{
        background: #f2f2f2;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.live_searchBox input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var form_liveval = $(this).val();
        var live_results_searchDropdown = $(this).siblings(".live_results_search");
        if(form_liveval.length){
            $.get("backend-search.php", {query_string: form_liveval}).done(function(data){
                //Devloped By Pakainfo.com :  Display the returned data in browser
                live_results_searchDropdown.html(data);
            });
        } else{
            live_results_searchDropdown.empty();
        }
    });
    
    // Set search input value on click of live_results_search item
    $(document).on("click", ".live_results_search p", function(){
        $(this).parents(".live_searchBox").find('input[type="text"]').val($(this).text());
        $(this).parent(".live_results_search").empty();
    });
});
</script>
</head>
<body>
    <div class="live_searchBox">
        <input type="text" autocomplete="off" placeholder="Search country..." />
        <div class="live_results_search"></div>
    </div>
</body>
</html>

Phase 3: Processing Search Query in Backend

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$db_link = mysqli_connect("localhost", "root", "", "demo");
 
// Check connection
if($db_link === false){
    die("ERROR: db Could not connect. " . mysqli_connect_error());
}
 
if(isset($_REQUEST['query_string'])){
    //Devloped By Pakainfo.com Prepare a select statement
    $sql = "SELECT * FROM students WHERE name LIKE ?";
    
    if($stmt = mysqli_prepare($db_link, $sql)){
        //Devloped By Pakainfo.com Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_query_string);
        
        //Devloped By Pakainfo.com Set parameters
        $param_query_string = $_REQUEST['query_string'] . '%';
        
        //Devloped By Pakainfo.com Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            $live_results_search = mysqli_stmt_get_live_results_search($stmt);
            
            //Devloped By Pakainfo.com Check number of rows in the live_results_search set
            if(mysqli_num_rows($live_results_search) > 0){
                // Fetch live_results_search rows as an associative array
                while($row = mysqli_fetch_array($live_results_search, MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: sorry Could not able to execute $sql. " . mysqli_error($db_link);
        }
    }
     
    // Devloped By Pakainfo.com Close statement
    mysqli_stmt_close($stmt);
}
 
//Pakainfo.com close connection
mysqli_close($db_link);
?>

Example

I hope you have Got What is Autocomplete textbox using jQuery, PHP and MySQL And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Related FAQ

Here are some more FAQ related to this Article: