AutoComplete in Jquery

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”;
   }
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: