jquery Implementation search keyword automatic matching hint method

In the current web design, improving the user experience is one of the most important content of enterprise. In the search form, according to the input of some of the content of the keyword matching hints function, is the most intuitive and commonly used interactive experience, similar features have been used by most Internet web sites. For example, Google's search box effect is as follows:

Here is a jquery implementation search keyword automatic matching hint method. jquery autocomplete is a search based on jquery keyword automatic matching hint of the plug-in, the plug-in scalability, performance superior performance, easy to integrate into their own projects; compatible with IE 6.0+, FF, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ and other mainstream browsers.

Demo effect :http://www.devbridge.com/projects/autocomplete/jquery/#demo

Here are the specific ways to use them:

1, use settings

First, embed the plug-in's JS code into your own project.

2. How to use

Add AutoComplete functionality to the input form for which you want to implement automatic matching prompts.

Initialize the AutoComplete object to ensure that the DOM object is loaded correctly, otherwise the user under IE may receive 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 "s z-index deferrequestby:0,//Request delay (milliseconds), if you do not have prefer to send lots of requ ESTs While the user is typing. I usually set the delay at Ms. Params: {country: "Yes"},///Additional parameters Onselect:function (data, value) {},//Callback function, trig gered 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 Opti Ons Used in callback functions. }

The JQuery AutoComplete plug-in supports the On/off function, 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 id= "autocomplete_1240430421731" class= "AutoComplete" style= "width:299px"; > Liberia libyan Arab jamahiriya Liechtenstein Lithuania

. 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 Plugin Official links

introduction of Plug-ins : www.devbridge.com/projects/autocomplete/jquery/

plugin Download : www.devbridge.com/projects/autocomplete/jquery/#download

Here is also a MooTools framework based on the keyword automatic matching hint method:

MooTools: www.ajaxdaddy.com/mootools-autocomplete.html