Jquery autocomplete search using php mysql and ajax

In this post, We have shared post a jquery autocomplete search using PHP MySQL and ajax. jquery and Ajax are the best part of the in web development. so in this post, we will make the jquery autocomplete search using PHP MySQL and Ajax.

so basically. We need to create a database and make the configuration PHP with MySQL. We will create an index.php file and this file in We will use the bootstrap and textbox. When visitor type in the textbox then We will use the keyup event of the jquery. If search value does not blank then ajax call to search.php file and that file connect with MySQL, It will search the data in the database using the “like where clause”. If getting the searching related data then return the JSON formate data otherwise return the empty data.

Create a index.php file

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jquery autocomplete search using php mysql and ajax</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
    ul{	list-style: none; padding: 0px;	width: 100%; padding-right: 5%;position: absolute;margin: 0; }
    ul li{ background:#D3DCE3;padding: 4px;margin-bottom: 1px;}
    ul li:nth-child(even){ background:#E5E5E5; color: white; }
    ul li:hover{ cursor: pointer; }
</style>	
<script type="text/javascript">
    $(document).ready(function(){
            $("#txtSearch").keyup(function(){
                var search = $(this).val();
                if(search != ""){
                    $.ajax({
                        url: 'search.php',
                        type: 'post',
                        data: {search:search},
                        dataType: 'json',
                        success:function(response){
                            var len = response.length;
                            $("ul").empty();
                            for( var i = 0; i<len; i++){
                                $("ul").append("<li value='"+response[i]['id']+"'>"+response[i]['name']+"</li>");
                            }

                        }
                    });
                }
            });
    });
</script>
</head>
<body>
<div class="container auto">
    <div class="row" style="margin-bottom:10px;">
        <div class="col-lg-12"><h2 style="text-align:center;">jquery autocomplete search using php mysql and ajax</h2></div>
    </div>
    <div class="form-group row">
        <div class="col-lg-3">&nbsp;</div>
        <div class="col-lg-6">
    		<label for="txtSearch">Enter Name:</label>
    		<input type="text" class="form-control" id="txtSearch" name="txtSearch">
    		<ul></ul>
	</div>
	<div class="col-lg-3">&nbsp;</div>
   </div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jquery autocomplete search using php mysql and ajax</title>

<style>

ul{ list-style: none; padding: 0px; width: 100%; padding-right: 5%;position: absolute;margin: 0; }

ul li{ background:#D3DCE3;padding: 4px;margin-bottom: 1px;}

ul li:nth-child(even){ background:#E5E5E5; color: white; }

ul li:hover{ cursor: pointer; }

</style>

$(document).ready(function(){

$("#txtSearch").keyup(function(){

var search = $(this).val();

if(search != ""){

$.ajax({

url: 'search.php',

type: 'post',

data: {search:search},

dataType: 'json',

success:function(response){

var len = response.length;

$("ul").empty();

for( var i = 0; i<len; i++){

$("ul").append("<li value='"+response[i]['id']+"'>"+response[i]['name']+"</li>");

}

});

}

});

</script>

</head>

<body>

<div class="col-lg-12"><h2 style="text-align:center;">jquery autocomplete search using php mysql and ajax</h2></div>

</div>

<label for="txtSearch">Enter Name:</label>

</div>

</div>

</body>

</html>

Create a search.php file

<?php
	 $hostname="localhost";
	 $username="root";
	 $password="";
	 $database="ajax_autocomplete";
	 $conn = mysqli_connect($hostname,$username,$password,$database);


    $searchText = $_POST['search'];
	if(!empty($searchText))
	{
		$sql = "SELECT id,name FROM user where name like '%".$searchText."%' order by name asc limit 5";
		$result = mysqli_query($conn,$sql);
		$search_arr = array();

		while($row = mysqli_fetch_array($result)){
			$search_arr[] = array("id" => $row['id'], "name" => $row['name']);
		}

		echo json_encode($search_arr);

	}
?>

<?php

$hostname="localhost";

$username="root";

$password="";

$database="ajax_autocomplete";

$conn = mysqli_connect($hostname,$username,$password,$database);

$searchText = $_POST['search'];

if(!empty($searchText))

{

$sql = "SELECT id,name FROM user where name like '%".$searchText."%' order by name asc limit 5";

$result = mysqli_query($conn,$sql);

$search_arr = array();

while($row = mysqli_fetch_array($result)){

$search_arr[] = array("id" => $row['id'], "name" => $row['name']);

}

echo json_encode($search_arr);

}

I have shared demo. So you can click on Button and show the demo.

Show Demo