Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
    • Guest Posting Service
  • Advertise
  • About
  • Contact Us

Ajax PHP MySQL Creating Autocomplete Search Suggestion

June 19, 2018 Pakainfo Technology, Ajax, Mysql, Mysqli, php, Programming Leave a comment

Ajax PHP MySQL Creating Autocomplete Search Suggestion

Contents

  • Ajax PHP MySQL Creating Autocomplete Search Suggestion
    • Ajax Live Database Search
    • Phase 1 Making the Database Table
    • Phase 2 Making the Search Form
    • Phase 3 Processing Search Query in Backend
    • Related posts

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

Also Read This ๐Ÿ‘‰   PHP Autocomplete Textbox using jQuery 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 posts:

  1. Ajax Live Data Search using Jquery PHP MySql
  2. Google Like Autosuggest Search Using PHP Ajax
  3. Bootstrap Autocomplete Search Box / textbox in PHP MySQL
  4. Autocomplete Search Box / textbox in PHP MySQL
ajax php mysql search exampleajax search box php mysql demoajax search box php mysql like googleauto suggestion in php using ajaxautocomplete search box in php mysqlautocomplete textbox using jquery ajax in phpphp autocomplete from database examplephp autocomplete textbox from database

Post navigation

Previous Post:How to create a Login page with PHP and MySQL
Next Post:Angular 4 Tutorial for beginners – Angular 4 Introduction

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

Write For Us

Weโ€™re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (94) Education (65) Entertainment (131) fullform (87) Google Adsense (64) Highcharts (77) History (40) Hollywood (109) JavaScript (1359) Jobs (43) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1035) Mysqli (894) php (2133) Programming (2346) Python (99) Software (198) Software (94) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (149) Technology (2427) Tips and Tricks (130) Tools (215) Top10 (514) Trading (98) Trending (79) VueJs (250) Web Technology (116) webtools (201) wordpress (166) World (351)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

ยฉ 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites