Search keyword automatic matching function based on jquery _jquery

Today we'll take a look at a simple jquery based keyword automatic matching example, I hope the article can help you.
Example One
In the project, sometimes the user needs to choose the city, but the city is too much, the user is not easy to choose, so provide a user can enter the city through the input box of Chinese characters or pinyin shorthand. The result sketch is as follows:

When pinyin is entered, the result sketch is as follows:

The implementation code is as follows:

Note the point:

1, when I want to implement in the input box real-time query list value, think of the first scheme is to use Ajax, but think about the value of the list is basically fixed, why not load out at once, so the background code changed, all the city details are loaded out.
2, the input box value changes need to trigger events, my first idea is to use onchange, but in fact onchange is the input box value changes and the input box loses focus, so I finally used the KeyUp. KeyUp test on the computer is no problem, but in the micro-mail, how does not take effect. The KeyUp is replaced with the final bind (' Input PropertyChange ', function () {}.
3, in determining whether the city character contains the characters in the input box, I use the contains function, in Firefox under the test without any problems, but in chrome and micro-mail client does not take effect. Finally, the contains is replaced with IndexOf.

Example two, uses the Jquery.autocomplete plug-in to realize.
1, the use of settings
first, embed the plug-in's JS code into your own project.

<script src= "Jquery.js" type= "Text/javascript" ><!--mce:0--></script><script src= " Jquery.autocomplete.js "type=" Text/javascript "><!--mce:1--></script>

2, the use of methods
Add AutoComplete functionality to the input form for which you want to implement automatic matching prompts.

<input id= "Query" name= "Q"/>
initializes the AutoComplete object to ensure that the DOM object is loaded correctly, otherwise the user under IE may have an error.
$ (' #query '). AutoComplete ({serviceurl: ' service/autocomplete.ashx ',//Page for processing AutoComplete requests Minchars:2,//Minimum request length for triggering AutoComplete delimiter:/(, |;) \s*/,//Delimiter for separating requests (a character or regex) maxheight:400,//Maximum height of the suggestion list , in pixels width:300,//List width zindex:9999,//list ' Z-index deferrequestby:0,//Request delay (milliseconds), If you are prefer to send lots the requests while the user is typing.  I usually set the delay at Ms. Params: {country: ' Yes '},//Additional parameters Onselect:function (data, value) {}, Callback function, triggered if one of the suggested options is selected, lookup: [' January ', ' February ', ' March ']// List of suggestions for local AutoComplete});

Match the keyword hints according to the input information in the text form.

{query: ' Li ',//Original Request suggestions:[' Liberia ', ' Libyan Arab Jamahiriya ', ' Liechtenstein ', ' Lithuania '],//List of suggestions data:[' LR ', ' LY ', ' LI ', ' LT ']//Optional parameter:list of keys for suggestion options; Used in callback functions. 
the JQuery AutoComplete plug-in supports On/off functionality, thereby controlling the effect of the switch.
var ac = $ (' #query '). AutoComplete ({/*parameters*/}); ac.disable (); ac.enable (); Ac.setoptons ({zindex:1001});

3, set the performance style

Finally, use Div and CSS to beautify the performance effect.

<div class= "Autocomplete-w1 ><div id=" autocomplete_1240430421731 "class=" AutoComplete "style=" width:299px ;" ><div><strong>li</strong>beria</div><div><strong>li</strong>byan Arab jamahiriya</div><div><strong>li</strong>echtenstein</div><div class= " Selected "><strong>Li</strong>thuania</div></div></div> autocomplete-w1 { Background:url (img/shadow.png) No-repeat bottom right; Position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 FIX: * * _background:none; _margin:1px 0 0 0; }.autocomplete {border:1px solid #999; background: #FFF; cursor:default; text-align:left; max-height:350px; overflow: Auto margin:-6px 6px 6px-6px; /* IE6 Specific: * * _height:350px; _margin:0; _overflow-x:hidden; }.autocomplete. Selected {background: #F0F0F0;}. AutoComplete div {padding:2px 5px; white-space:nowrap; overflow:hidden;}. AutoComplete strong {font-weight:normal; color: #3399FF
 } jQuery AutoComplete

  above share two examples are about jquery to achieve the Search keyword automatic matching function, I hope to help you learn.