Autocomplete using jQuery, PHP and MySQL
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.
Table of Contents
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:
<?php
include 'dbConfig.php';
$companyTxt = $_GET['term'];
if (isset($companyTxt)){
$dbArray = array();
$companyTxt=mysql_real_escape_string($companyTxt);
$query=mysql_query("SELECT name FROM autocomplete WHERE name like '%$companyTxt%'");
while($rows = mysql_fetch_array($query))
{
$dbArray[] =$rows['name'];
}
echo json_encode($dbArray);
}
?>
we have included the dbconfig.php file in autocomplete.php file for the database access.
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,
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.ngdeveloper.com">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:
its not working on localhost i’m download demo and checking out but its not fetching any automatic suggestion . what’s the problem can u help me
Can you ensure db you set up correctly ? and share the errors or additional informations to help you.