Jquery plug-in is similar to the baidu search keyword auto-match function, and jquery Baidu search

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.