kvAC jQuery plugin :: Blog

kvAC jQuery plugin

Yet another jQuery autocomplete plugin. Simple, handy and brief ;)

kvAC demo

If you're interested, look at kvAC demo page to see it in action.

Documentation

This one will be described a lil' bit different than my other jQuery plugins. The reason is that this one works with my DB, uses my DB classes and also the .htaccess is used. All these are things - not for public :) I'm willing to help with implementation if requested tho.

Also the download package has to be different than usual of course. This time only the kvAC js files are included. There are both full and packed versions in this package. Everything else (besides the mentioned exceptions) can be found on my demo page.

Implementation

There're only 2 options for kvAC. Here they are:

ajax_path - has to be filled properly .. this is the path to your ajax script, which provides autocomplete data
onSelect - CallBack function to be called after an item is selected

So the simplest implementation would look like:

$(function () {
    $('#input_id').kvAC({
        ajax_path: 'your_script.xml'
    });
});

If you want to specify your onSelect CallBack function the initialization would look like:

$(function () {
    $('#input_id').kvAC({
        ajax_path: 'your_script.xml',
        onSelect: function () {
            alert('You've selected item with ID: ' + $('#input_id').data('kvAC') + ' and text: ' + $('#input_id').val());
        }
    });
});

input_id is the id of the input you want to kvAC.

You can select an item with mouse or with enter key. You can navigate through items using up and down keys.

The kvAC does 2 things on select: Sets the bounded input's value to the selected text and sets the jQuery.data('kvAC') value to the selected item's ID value (explained later on by XML description).

In your AJAX script you should generate the following XML structure:

<items>
    <item>
        <id>Item ID</id>
        <text>Item text</text>
    </item>
 
    <item>
        <id>Item ID</id>
        <text>Item text</text>
    </item>
 
    .
    .
    .
</items>

Download

You can download the demo file package containing the kvAC code. Feel free to use this package and all its parts in any way. You can use it, edit it, reproduce it ...

Compatibility

This plugin was tested successfully with jQuery v1.2.6 and on the following browsers: IE 6, FFX 3+, Opera 9.5+, Chrome 1.0.

Peter Rossa