JQuery's automatic search keyword matching plug-in

I believe many people will use the function of automatically matching keywords in the search bar. Many of them use this keyword matching technology, whether it is a professional search engine like google or a common website, the keyword matching technology implemented by jQuery is introduced in this article. To integrate it into your own system, you also need to link the background code.

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 implements automatic matching prompts for 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.

12	<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.

1	<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.

123456789101112

$('#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.

12345

{    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.

1234	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.

12345678

<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>

12345

.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