Auto complete search in JQuery possible by including the jquery autocomplete plugin provided by the jquery library. Follow the link below to get the Jquery Autocomplete updated plugin with the examples,
http://dyve.net/jquery/?autocomplete
For running the Jquery autocomplete smoothly we need to include the following js file in the files
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
<script type=’text/javascript’ src=’js/jquery.autocomplete.js’></script>
The below code will shows the input box with auto complete functionalities,
<p>
Ajax City Autocomplete:
<input type=”text” id=”CityAjax” value=”" style=”width: 200px;” />
<input type=”button” value=”Get Value” onclick=”lookupAjax();” />
</p>
on typing a keywords in CityAjax table, the autocomplete will fire with help of following code,
$(document).ready(function() {
$(“#CityAjax”).autocomplete(
”autocomplete.php”,
{
delay:10,
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true,
maxItemsToShow:10
}
);
The Autocomplete.php will give the JSON formated data to the autocompleter list to search auto display the typed keyword like lists. The Auto Search will start after typing minimum 3 characters in the input box.
The properties controlling search auto complete is shown above.
Calling the autocomplete JQuery for the inbut box is,
function lookupAjax(){
var oSuggest = $(“#CityAjax”)[0].autocompleter;
oSuggest.findValue();
return false;
}
JSON Retriver:
The Json Coverter in the autocomplete.php will look like,
error_reporting(0);
include(‘dbconfig.php’);
$q = strtolower($_GET["q"]);
if (!$q) return;
$query=mysql_query(“select * from invheader”);
$temp_items=array();
$i=0;
while($qdata=mysql_fetch_array($query))
{
$temp_items[$qdata['note']].=$qdata['note'];
$i++;
}
foreach ($temp_items as $key=>$value) {
if (strpos(strtolower($key), $q) !== false) {
echo “$key|$value\n”;
}
}
