This example for you to share the jquery search keyword automatic matching function of the implementation code for your reference, the specific contents are as follows
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.
Here are the specific ways to use them:
1, the use of settings
First, embed the plug-in's JS code into your own project.
Copy Code code as follows:
<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"/>
Initialize the AutoComplete object to ensure that the DOM object is loaded correctly, otherwise the user under IE may receive an error.
Copy Code code as follows:
$ (' #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.
Copy Code code as follows:
{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 the On/off function, thereby controlling the effect of the switch.
Copy Code code as follows:
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.
Copy Code code as follows:
<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 }
4. Example explanation
The implementation effect is as follows:
The above is about the jquery AutoComplete Use method Introduction, through the complete example shows the jquery AutoComplete to use the effect, hoped that is helpful to everybody's study.
