Autocomplete using jQuery, PHP and MySQL

autocomplete_output

Autocomplete is a basic mandatory functionality in any web development.

It will help user to find the correct item just with partial name/some letters of the item which they know about the item.

 

demo
download

 

Import the below scripts and CSS’s:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
Note: Bootstrap.js and bootstrap.min.css imported for the better UI, you can remove it if you want only the autocomplete functionality.

 

Input text field:

<p>Enter the company names (Eg: Flipkart) <br/><input type='text' name='companyTxt' value='' id='dynSearchTxt' class='dynSearchTxt'></p>

 

Script [ID]:

$(function() {
$("#dynSearchTxt").autocomplete({
source: "AutoComplete.php",
minLength: 1
});
});

dynSearchTxt is a id of the input text field. If you want to use the class of the input text field instead of id, then you need to replcae the # by . in the above script.

 

Script [Class]:

$(function() {
$(".dynSearchTxt").autocomplete({
source: "AutoComplete.php",
minLength: 1
});
});

 

Autocomplete.php is a php file which checks the data with the database for the user entered data and returns the matched data in JSON format. Returned JSON format data will be displayed in the dropdown by default because of the jquery-ui.min.js.

We do not want to add any code to display the returned JSON data in the dropdown.

For dropdown styles we imported the jquery-ui.css file. jquery-ui.css is having alot of themes, you can import any style.
Google jQuery UI CSS CDN Themes

 

Autocomplete.php:

dbConfig.php:


<?php
$dbhost = 'localhost';
$dbuser = 'DB_USER_NAME';
$dbpass = 'DB_PASSWORD';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Database Connection Failed : ' . mysql_error());
}
mysql_select_db('DB_NAME');
?>

 

If you are using xampp then default mysql username will be ‘root’ and password is ”[empty].

we have created a table ‘autocomplete’ with the sample data like below,

 

autocomplete_javadomain_sample_data

 

 

 

 

 

 

 

 

Complete source code of index.php file:

Remaining required files are autocomplete.php and dbconfig.php, full source code of these two files are given at the top itself.

<!doctype html>
<html lang="en">
<head>
<title>Autocomplete Demo - Javadomain.in</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript">
$(function() {
$("#dynSearchTxt").autocomplete({
source: "AutoComplete.php",
minLength: 1
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="head">
<div class="row-fluid">
<div class="span12">
<div class="span6">
<h1 class="muted"><a href="www.javadomain.in">Autocomplete using jQuery, PHP and MySQL Demo</a></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<p>Enter the company names (Eg: Flipkart) <br/><input type='text' name='companyTxt' value='' id='dynSearchTxt' class='dynSearchTxt'></p>
</div>
</div>
</div>
</div>
</body>
</html>

 

Output:

autocomplete_output

 Note: If you download the zip file, you can find the autocomplete.sql file, which you can direclty import and test the autocomplete functionality.

 

 

PHP Recommended Books:

220 total views, 2 views today

2 comments

Leave a Reply

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