Home > Developer > JavaScript
JQuery-based Automatic match of search keywords
Let's take a look at a simple example of automatic match based on jquery keywords. I hope the article will be helpful to you.
Example 1
In projects, users sometimes need to select a city, but there are too many cities, which is inconvenient to select. Therefore, a user can enter Chinese characters or short Chinese characters of the city in the input box. The result is as follows:
After entering pinyin, the result is as follows:
The implementation code is as follows:
<Html>Note:
1. When I want to query the List Value in real time in the input box, the first method is to use ajax, but I thought about it and found that the List Value is basically fixed, why isn't it loaded at a time? So I changed the background code and loaded all the city details.
2. When the value change in the input box needs to trigger the event, my first thought is to use onchange, but in fact, onchange is the value change in the input box and the input box loses focus, so I finally use keyup. Keyup has no problem in computer testing, but it does not take effect at the end. Replace the keyup with the final bind ('input propertychange', function (){}.
3. When determining whether the city character contains characters in the input box, I use the contains function. There is no problem in the test under Firefox, but it does not take effect on chrome and the client. Finally, replace contains with indexOf.Example 2: Use the jquery. autocomplete plugin.
1. Use settings
On the homepage, You need to embed the js Code of the plug-in 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. 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. $ ('# 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.
{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. 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.
<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 AutoCompleteThe two examples mentioned above are about jQuery's function of automatically matching search keywords. I hope this will be helpful for your learning.
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
