jQuery → jQuery AutoComplete

+4
11 November 2009, 07:09
Timmay

I'd like to present another jQuery plugin, this time it's autocomplete with some handy features.

Description

The major benefit offered by this plugin is its high performance. As all request results are cached, the cache might be used next time, which leaves the server alone.

Besides, AutoComplete has some unique features, such as text separators, searching by a few words, and the optional using of the component autonomously, i.e. without sending requests to the server.

The plugin works in IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+.

jQuery AutoComplete

Installation

Installing the plugin is a routine task — just include the .js file after jQuery.

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

How to use it

Let's add autocomplete for the standard input:

<input type="text" name="q" id="query" />

The autocomplete object is then initialized — make sure that initialization is duly done following the DOM loading, otherwise IE users might experience some glitches.

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

The page specified in serviceUrl receives a GET request, in response to which it must send JSON data:

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

You can turn autocomplete on/off as well as re-initialize its parameters anytime via the object functions:

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

Stylization

The script makes the following tagged piece of code:

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

Here's 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; }