Sunday, April 18, 2010

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.

6 comments:

  1. hi,u know how to pass the array instead of cities

    ReplyDelete
  2. u means to say you want to pass array value instead of city , thn u can pass it no prb

    same as i have done on the city.
    u can consider it as a string and pass that variable. atlast its upto you wht ur passing and wht output your showing.

    still if u have any problem plz let me know
    thax

    ReplyDelete
  3. hey hey... how could we change that array from
    the respond of the PHP code by our request... can we can we can we....?

    ReplyDelete
  4. you want to create a array in php. refer this
    "Aberdeen","b"=>"Ada","c"=>"US");
    print_r($a
    ?>

    ReplyDelete
  5. thx for the answer
    can i change that list with any arrylist or using generics ( in C#)

    ReplyDelete