Jquery AutoComplete Plugin

Hi yes long time back , i was quite busy with my life , fine today i come up with Jquery cool feature , i thing is very known to you and its very useful while developing any application ,

yes its " AutoComplete" plugin . Jquery has good plugin on auto-completion , which means that what ever you want to seach and if you search accordingly it will display the result on the same bases. yes on the same bases , now your very much interested to use this yes you can use this on your application, and make your search more attractive and more easy to user. here are the way you can add the code for auto completion tool.

There are some good Features you will get over the AutoCompletion Tools .
1. Just like a Drop down but with quite good help.
2. just like DOM tree on xml
3. Better window auto complete box.
and may more.

steps to add Jquery on your page.

1. Put this code on your < head > section
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" > </script >
< script type='text/javascript' src='./jquery.autocomplete.js'> </script >

2. add below form tag
< form action="" onsubmit="return false;" >

<p >
Enter City: < input type="text" id="CityLocal" value="" />
< input type="button" value="Get Value" onclick="lookupLocal();" />
< /p >

3. on your javascript code add this

< script type="text/javascript" >
function lookupLocal(){
var oSuggest = $("#CityLocal")[0].autocompleter;

oSuggest.findValue();

return false;
}

$(document).ready(function() {
$("#CityAjax").autocomplete(
"autocomplete_ajax.cfm",
{
delay:10,
minChars:2,
matchSubset:1,
matchContains:1,
cacheLength:10,
onItemSelect:selectItem,
onFindValue:findValue,
formatItem:formatItem,
autoFill:true
}
);

$("#CityLocal").autocompleteArray(
[
"Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron",
"Albany", "Alexandria", "Alger", "Alledonia", "Alliance", "Alpha", "Alvada",
"Alvordton", "Amanda", "Amelia", "Amesville", "Amherst", "Amlin", "Amsden",
],
{
delay:10,
minChars:1,
matchSubset:1,
onItemSelect:selectItem,
onFindValue:findValue,
autoFill:true,
maxItemsToShow:10
}
);
});
< /script >

for the Example purpose i have declare few city name , you can add this on array as per your requirement and all.

5. close the form section and run the page , it will show your the output like this way


You can download the source code and sample from here
Download Here .
Demo Here .

hope you like it , if you have any query or comment plz leave a reply to full fill your query, thank you.