Please support us by disabling ad blocker for smarttutorials.net ...

Autocomplete Using jQuery, Ajax, PHP and MySQL

Posted by & filed under CSS, HTML5, JQUERY, MYSQL, PHP.

In this tutorial we are going to see autocomplete using jQuery, Ajax,PHP and MySQL.

jquery autocomplete integration

AutoComplete Using jQuery, Ajax, PHP and MySQL

Demo

 

AutoComplete Using jQuery, Ajax, PHP and MySQL

AutoComplete Using jQuery, Ajax, PHP and MySQL

Follow each steps carefully to create this autocomplete function by yourself.

Step 1:

create this below table using the below query.

CREATE TABLE IF NOT EXISTS `auto` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `data` varchar(75) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
AutoComplete Using jQuery, Ajax, PHP and MySQL

Download

Step 2:

Create index.php file and add the following html codes to create autocomplete text box.

<h1>AutoComplete Using jQuery, Ajax, PHP and MySQL</h1>
<div class="ui-widget">
<label for="tags">Type Something: </label>
<input id="tags" />
</div>

Step 3:

Add the following css to add styles to our html we just created.

* {
   background-color: #16a085;
   margin: 0;
   padding: 0;
   color: white;
}
@font-face{
font-family: Lobster;
src: url('Lobster.otf');
}
h1{
font-family: Lobster;
text-align: center;
color: white;
margin-top: 50px;
font-size: 3em;
}

.ui-autocomplete-input{
 color: white;
}

.ui-widget {
    color: white;
    font-family: 'Lobster';
    font-size: 2em;
    text-align: center;
	margin-top: 130px;
}
#tags{

    background: none repeat scroll 0 0 white;
    height: 35px;
    width: 300px;
	color: blue;
	text-align: center;
	border: 2px solid white;
	border-radius: 5px;

}

Step 4:

Add following jQuery library files in the index.php file.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

 

Step 5:

Now in the keyup() event of the autocomplete textbox, I am getting the user entered values.

<script>
$(function() {
$('#tags').keyup(function(){
     var data=$('#tags').val();
});
</script>

Now using $.ajax() function, I am making ajax request to the php file that’s going to provide autocompletion values.

<script>
$(function() {
$('#tags').keyup(function(){
     var data=$('#tags').val();
	 $.ajax({
	   type:'POST',
	   url:'ajax.php',
	   data:"data="+data,
	   dataType: "json",
	   success: function(msg){
	        var availableTags = msg;
			$("#tags").autocomplete({
			   source: availableTags
			});
	   }
	});

});
});
</script>

 

Step 6:

Create ajax.php file that gets the ajax request. It process the request data and provides auto completion values.

<?php
$data=$_POST['data'];
$result=mysql_query("SELECT * FROM auto where data LIKE '$data%'");
$data=array();
while($response=mysql_fetch_array($result)){
array_push($data,$response['data']);
}
echo json_encode($data);
?>

It gets post data, and using that post data we are going query the database. Result will be saved in array, finally the result is converted into json values and send it back to index.php file..

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!