Hi friends, how are you all? I hope that you all fine. After completed diwali vacation, I am here with you to share some programming knowledge. Today i am going to share with you jquery ajax auto-complete example. Normally autocomplete functionality is very useful as a user point of view. it gives us top suggestion regarding our search query. Today i will show you how to make a jquery ajax autocomplete example using PHP and MySQL. So lets start step by step.
In this tutorial we will use countries for auto-complete. Create a database named countries and has three fields country_id, country_name and country_code. Please download the source-code package and you will find out countries.sql file. Just import it into your database and you are ready with your database.
[sociallocker]
Download Demo
[/sociallocker]
Now create a database connection using below config.php file
config.php
<?php
$db_hostname = 'localhost'; // Database hostname
$db_username = 'root'; // Database username
$db_password = ''; // Database password
$db_name = 'test'; // Database name
$conn = mysqli_connect($db_hostname, $db_username, $db_password, $db_name);
if(!$conn)
{
echo "Unable to connect database".mysqli_error($conn);die;
}
else
{
// echo "Database connected successfully";
}
?>
Now see the index.php file. In index.php file you will get one textbox where user can search a query. I will use jquery’s keyup() function for detecting what user type and send it to the database and grab data which related to search query. The incoming response data is in the json format. I will decode the json format and use it where i want.
index.php
<!DOCTYPE html>
<html>
<head>
<title> Autocomplete search box | CodeandTuts </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Script for Bootstrap JS -->
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h2>Autocomplete search box</h2></center>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- Form data start -->
<form action="" method="POST" class="form-inline" role="form">
<div class="form-group">
<label class="" for="">Search a Query : </label>
<input type="text" class="form-control search_query" id="search_query">
</div>
</form>
<div id="data-container"></div>
<!-- Form data end -->
<div class="selected_data_containter" id="selected_data_containter">
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('#search_query').keyup(function() {
var search_query = $(this).val();
var form_data = {
search_query : search_query
}
var resp_data_format="";
$.ajax({
url:"find-response.php",
data : form_data,
method : "post",
dataType : "json",
success : function(response) {
for (var i = 0; i < response.length; i++) {
resp_data_format=resp_data_format+"<li class='select_country'>"+response[i]+"</li>";
};
$("#data-container").html(resp_data_format);
}
});
});
$(document).on( "click", ".select_country", function(){
var selected_country = $(this).html();
$('#search_query').val(selected_country);
$('#data-container').html('');
});
</script>
</html>
Now let’s see the find-response.php file. It is a file from which you will get related countries list with every time search new query.
find-response.php
<?php
include 'config.php';
$resp = [];
$search_query = mysqli_real_escape_string($conn,$_POST['search_query']);
$sql = "SELECT * FROM countries WHERE country_name LIKE '$search_query%'";
$query = mysqli_query($conn, $sql);
while($data = mysqli_fetch_array($query))
{
$resp[] = $data['country_name'];
}
echo json_encode($resp);
?>
For your practice
You can extend this functionality by some variations. You can put a character limit and after reach a character limit you get a suggestion response. Try it yourself and let me know possible solutions in the comment-box.
I hope that you may like this jquery ajax autocomplete using php and mysql. Please do share it with your friends. If you have any problem regarding this tutorial let me know in the comment-box. Thank you. 🙂
