Jquery auto-match prompt for search keywords

In the current web design, improving user experience is one of the most important content for enterprises. In the search form, keyword matching based on some input content is the most intuitive and common interactive experience. Similar functions have been used by most Internet websites. For example, Google's search box has the following effects:

Here is a jquery Method for automatically matching search keywords.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 +.

Demo Effect: Http://www.devbridge.com/projects/autocomplete/jquery/#demo

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.

<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:'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 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 AutoComplete plugin official link

Plugin Introduction: Www.devbridge.com/projects/autocomplete/jquery/

Plugin download: Www.devbridge.com/projects/autocomplete/jquery/#download

There is also an automatic keyword matching prompt Method Based on the mootools framework:

Mootools: Www.ajaxdaddy.com/mootools-autocomplete.html