Jquery autocomplete search using php mysql and ajax – onlinecode
In this post we will give you information about Jquery autocomplete search using php mysql and ajax – onlinecode. Hear we will give you detail about Jquery autocomplete search using php mysql and ajax – onlinecodeAnd how to use it also give you demo for it if it is necessary.
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 >
<div style="margin-bottom:10px;">
<div ><h2 style="text-align:center;">jquery autocomplete search using php mysql and ajax</h2></div>
</div>
<div >
<div > </div>
<div >
<label for="txtSearch">Enter Name:</label>
<input type="text" id="txtSearch" name="txtSearch">
<ul></ul>
</div>
<div > </div>
</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);
}
?>I have shared demo. So you can click on Button and show the demo.
Show Demo
Hope this code and post will helped you for implement Jquery autocomplete search using php mysql and ajax – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs