jQuery search keyword automatic matching plug-in_html/css_WEB-ITnose

I believe many people will have used the function of automatically matching keywords in the search bar. Whether it is a professional search engine like Google or an ordinary website, many people now use this keyword matching technology. This article introduces The keyword matching technology implemented with jQuery, of course, needs to be integrated into your own system and linked to the background code.

In today’s web design, improving user experience is one of the most important things for enterprises. In the search form, the keyword matching prompt function based on part of the input content is the most intuitive and commonly used interactive experience. Similar functions have been used by most Internet websites. For example, the effect of Google's search box is as follows:

Here is a jQuery method to implement automatic matching prompts for search keywords. jQuery AutoComplete is a plug-in that implements automatic matching prompts for search keywords based on jQuery. The plug-in has strong scalability, superior performance, and is easy to integrate into your own projects; compatible with IE 6.0, FF 2, Safari 2.0, Opera 9.0, and Chrome 1.0 and other mainstream browsers.

Demo effect: http://www.devbridge.com/projects/autocomplete/jquery/#demo

The following is the specific usage method:

1. Use the settings

homepage to embed the plugin’s js code into your own project.

1 2	< script src = "jquery.js" type = "text/javascript" > < script src = "jquery.autocomplete.js" type = "text/javascript" >

1 2

< script src = "jquery.js" type = "text/javascript" >

< script src = "jquery.autocomplete.js" type = "text/javascript" >

1	< input id = "query" name = "q" />

2, use the method to add the AutoComplete function to the input form where automatic matching prompts are to be realized.

1	< input id = "query" name = "q " />

Initialize the AutoComplete object to ensure that the DOM object is loaded correctly, otherwise users under IE may experience errors.

1 2 3 4 5 6 7 8 9 10 11 12

$( '#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      });

1 2

3

4

1 2 3 4 5

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

5

6

7

1 2 3 4

var ac = $( '#query' ).autocomplete({ /*parameters*/ });      ac.disable();      ac.enable();      ac.setOptons({ zIndex: 1001 });

8 9 10 11 12

$( '#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           });

Match keyword prompts based on the input information in the text form.

1 2 3 4 5

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

jQuery AutoComplete plug-in supports on/off function , thereby controlling the switch of the effect.

1 2 3 4

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 presentation effect.

1 2 3 4 5 6 7 8

< div class = "autocomplete-w1" > < div id = "Autocomplete_1240430421731" class = "autocomplete" style = "width: 299px;" > < div >< strong >Liberia < div >< strong >Libyan Arab Jamahiriya < div >< strong >Liechtenstein < div class = "selected" >< strong >Lithuania

1 2

3

1 2 3 4 5

.autocomplete-w 1 { 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

5

6 7

8

< div class = "autocomplete-w1" >

< div id = "Autocomplete_1240430421731" class = "autocomplete" style = "width: 299px;" >

< div >< strong >Li beria

< div >< strong >Libyan Arab Jamahiriya < div >< strong >Liechtenstein < div class = "selected" >< strong >Lithuania

.autocomplete-w 1 { 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 ; }

1 2 3 4 5

jQuery AutoComplete plug-in official link Plug-in introduction: www.devbridge.com/projects/autocomplete/jquery/ Plug-in download: www.devbridge.com/projects/autocomplete/jquery/#download Here There is also a keyword automatic matching prompt method based on the MooTools framework: MooTools: www.ajaxdaddy.com/mootools-autocomplete.html