Jquery ajax autocomplete search example tutorial

In this article i am trying to give the basic concept for Ajax autocomplete using jquery, Ajax and PHP. A simple and short php Ajax auto-suggest search tutorial. Basically this tutorial is designed for newbie and also for intermediate level developers. Ajax autocomplete mainly require to give autosuggestion when any one type something in the search field or text field. In this tutorial, we are going to suggest name starting with a,b or c. This ajax autocomplete example give you the idea to create this type of feature in your web application in future.

So this autocomplete using ajax tutorial divided into 3 parts.

  • First require a autocomplete text box for search.
  • Second ajax function to send value and get the result.
  • Last we need to fetch autocomplete suggestion data from database and append in our result area.

Take a quick look at this live demo to understand the flow of the autocomplete search using jQuery, Ajax, PHP. Also you can download this script from here and can try in your localhost or live server where you want to do.

Learn ajax autocomplete search step by step

create dbconfig.php for database connection

<?php
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'test';//you can use your database name.
$dbconfig = mysqli_connect($host,$username,$password,$database);
?>

create the form where user input to get autocomplete suggestion

<div class="frmSearch">
<form name="search-example" method="" action="">
<input type="text" id="search" placeholder="Name start with a,b, or c" />//input form for type
</form>
<div id="suggesstions">
//this area for show the jquery ajax autocomplete search result
</div>
</div>

jquery ajax function call when anything enter by user

<script>
$(document).ready(function(){
	//when any character press on the input field keyup function call
	$("#search").keyup(function(){
		$.ajax({
		type: "POST",// here used post method
		url: "readname.php",//php file where retrive the post value and fetch all the matched item from database
		data:'searchterm='+$(this).val(),//send data or search term to readname file to process
		beforeSend: function(){
			//show loader icon
			$("#search").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
		},
		success: function(data){
			//get the output from database on success
			$("#suggesstions").show();//show the suggestions
			$("#suggesstions").html(data);//append data in the box for selection
			$("#search").css("background","#FFF");
		}
		});
	});
});
//call this function after select one of these suggestion for hide the suggestion box and select the value
function selectname(selected_value) {
$("#search").val(selected_value);
$("#suggesstions").hide();
}
</script>

create readname.php for fetch data from database and send response

<?php
//include the dbconnection file
require_once("dbconfig.php");
//if search term exist then process the below lines of code
if(!empty($_POST["searchterm"])) {
	//the query responsible for fetch matched data
	$query ="SELECT * FROM username WHERE name like '" . $_POST["searchterm"] . "%' ORDER BY name LIMIT 0,4";
	$result = mysqli_query($dbconfig,$query);

		if(!empty($result)) {
			//prepare the list for append
		?>
                <ul id="name-list">
                <?php
                while($name=mysqli_fetch_array($result,MYSQLI_ASSOC)){
                ?>
                <li onClick="selectname('<?php echo $name["name"]; ?>');"><?php echo $name["name"]; ?></li>
                <?php } ?>
                </ul>
		<?php } 
} ?>

And the very last thing we need to append data to search result area. After populating the result user can choose easily which they want to choose.
All the steps mentioned in the comment hope all of you get a clear understanding of ajax search tutorial. So don’t miss clicker. To get updated subscribe our rss feed. Thanks for watching. I think it will helpful the newbie in PHP. Share with your friends.
Support
If you need any help regarding its configuration please feel free to comment we love to help you.

5 responses to “Jquery ajax autocomplete search example tutorial”

  1. Guest says:

    Neat blog! A design like yours with a few simple adjustments would really make my blog stand out. Bless you.

  2. Siddhant says:

    HI , how does one use the arrow keys to select from the suggested names

  3. Kaly says:

    Thanks a ton. You are so cool.

Leave a Reply

Your email address will not be published. Required fields are marked *