Home > Developer > JavaScript
Jquery plug-in is similar to the baidu search keyword auto-match function, and jquery Baidu search
Examples of this article are as follows:Jquery search keyword auto-match FunctionFor your reference, the specific content is as follows:
JQuery AutoCompleteIs a jQuery-based plug-in that automatically matches search keywords. This plug-in is highly scalable and has superior performance and can be easily integrated into your own projects. It is compatible with IE 6.0 +, FF 2 +, mainstream browsers such as Safari 2.0 +, Opera 9.0 +, and Chrome 1.0 +.
The following describes how to use it:
1. Use settings
On the homepage, You need to embed the js Code of the plug-in into your own project.Copy codeThe Code is as follows: <script src = "jquery. js" type = "text/javascript"> <! -- Mce: 0 --> </script> <script src = "jquery. autocomplete. js" type = "text/javascript"> <! -- Mce: 1 --> </script>
2. Usage
Add AutoComplete to the input form for automatic matching.
<Input id = "query" name = "q"/>
Initialize the AutoComplete object to ensure that the DOM object is correctly loaded. Otherwise, users in IE may encounter errors.Copy codeThe Code is 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's z-index deferRequestBy: 0, // Request delay (milliseconds), if you prefer not to send lots of requests while the user is typing. I usually set the delay at 300 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 });
Keyword matching is performed based on the input information in the text form.Copy codeThe Code is as follows: {query: 'lil', // Original request suggestions: ['Libera', 'libyan Arab Jamahiriya ', 'liechtenstein', 'lithuana'], // List of suggestions data: ['lr ', 'ly', 'lil', 'lt '] // Optional parameter: list of keys for suggestion options; used in callback functions .}
The jQuery AutoComplete plug-in supports the on/off function to control the effect.
Copy codeThe Code is as follows: var ac = $ ('# query '). autocomplete ({/* parameters */}); ac. disable (); ac. enable (); ac. setOptons ({zIndex: 1001 });
3. Set the presentation style
Finally, use div and css to beautify the performance.Copy codeThe Code is as follows: <div class = "autocomplete-w1"> <div id = "autocomplete_1240425421731" class = "autocomplete" style = "width: 299px; "> <div> <strong> Li </strong> beria </div> <strong> Li </strong> byan Arab Jamahiriya </div> <strong> Li </strong> echtenstein </div> <div class = "selected"> <strong> Li </strong> thuania </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. instance description
<Html>The implementation result is as follows:
The above is aboutJQuery AutoCompleteThe following describes how to use jQuery AutoComplete. The complete example shows you how to use jQuery AutoComplete.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
