jQuery AutoComplete

I want to bring to your attention the next plugin for jQuery, this time autofilling with your preference.

Description

')
The first advantage of the plugin is performance. All query results are cached, and the next time they are selected from the cache, and not from the server.
In addition, it has several unique functions, such as the use of delimiters, the search for several words, the ability to use the component offline, without sending a request to the server.

Works in IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, Chrome 1.0+

Installation

The installation procedure is rather ordinary: just connect the js-file after jQuery.

< script type ="text/javascript" src ="jquery.js" ></ script > <script type= "text/javascript" src= "jquery.autocomplete.js" > </ script > * This source code was highlighted with Source Code Highlighter .

Using

Add autocomplete to standard input:

< input type ="text" name ="q" id ="query" /> * This source code was highlighted with Source Code Highlighter .

Next, the autocomplete object is initialized, make sure that this happens after loading the DOM model, otherwise there may be glitches with IE.

$( '#query' ).autocomplete({ serviceUrl: 'service/autocomplete.ashx' , // minChars: 2, // delimiter: /(,|;)\s*/, // , maxHeight: 400, // , width: 300, // zIndex: 9999, // z-index deferRequestBy: 0, // (), , , . 300. params : { country: 'Yes' }, // onSelect: function (data, value){ }, // Callback , , lookup: [ 'January' , 'February' , 'March' ] // }); * This source code was highlighted with Source Code Highlighter .

The page specified in serviceUrl receives a GET request, and as a response should send data in JSON format:

{ query: 'Li' , // suggestions:[ 'Liberia' , 'Libyan Arab Jamahiriya' , 'Liechtenstein' , 'Lithuania' ], // data:[ 'LR' , 'LY' , 'LI' , 'LT' ] // , . callback } * This source code was highlighted with Source Code Highlighter .

You can enable / disable autocomplete, as well as re-initialize the parameters at any time, through the functions of the object:

var ac = $( '#query' ).autocomplete({ /**/ }); ac.disable(); ac.enable(); ac.setOptons({ zIndex: 1001 }); * This source code was highlighted with Source Code Highlighter .

Stylization

The script creates the following markup fragment:

< div class ="autocomplete-w1" > < div style ="width:299px;" id ="Autocomplete_1240430421731" class ="autocomplete" > < 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 > * This source code was highlighted with Source Code Highlighter .

Here is an example of CSS styles:

.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; } * This source code was highlighted with Source Code Highlighter .

Links

Description: www.devbridge.com/projects/autocomplete/jquery
Download the plugin here: www.devbridge.com/projects/autocomplete/jquery/#download
The version for Js Prototype: www.devbridge.com/projects/autocomplete/#download

UPD