Autocomplete for JQuery.js

Ajax Powered Autocomplete Plugin for JQuery.js

• Icon Notifier (Spinner between Ajax calls)
• Fire onAjaxFailure events when an error occurs during Ajax calls
• Be able to set a custom width
• A more flexible and dynamic creation of the autocomplete text field

The object is pretty complete but it could be nice to include more features. Here some of them:

• Dynamic themes. Being able to change the style of the autocomple and dropdown list could be a really nice feature to have.
• Different effects to show/hide the dropdown list (SlideDown|SlideUp) <- This one is easy with JQuery, any volunteers?

How it works

a) Configure the HEAD section of your HTML page:

<br />
<!-- insert the styles of the autocomplete box --></p>
<link rel="stylesheet" href="css/autocomplete.css" type="text/css" media="screen" charset="utf-8" />
<!-- javascript libraries required -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/autocomplete.jquery.js"></script>

b) Create the objects on DOM Load (you can also create them dynamically too):

var json_options = {
script:'test.php?json=true&limit=6&',
varname:'input',
json:true,
shownoresults:true,
maxresults:16,
callback: function (obj) { $('#json_info').html('you have selected: '+obj.id + ' ' + obj.value + ' (' + obj.info + ')'); }
};
var xml_options = {
script:'test.php?limit=6&', // for the sake of the server test, json var not set
varname:'input',
json:false, // <----------- IMPORTANT
shownoresults:true,
maxresults:16,
callback: function (obj) { $('#xml_info').html('you have selected: '+obj.id + ' ' + obj.value + ' (' + obj.info + ')'); }
};
$(function(){
$('#test_json').autoComplete(json_options); // json test
$('#test_xml').autoComplete(xml_options); // xml test
});

As you can see on the code, the ‘script’ property of the object is where we write the server page to call via AJAX in order to get the dropdown results. Let’s view the important lines within this test.php page:

// here we collect the POSTED variable
// what to search?
$input = strtolower( $_GET['input'] );
$len = strlen($input);
// how many results we display?
$limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;

Now, the way you find matches from such POSTED variable is up to you, it could be checked against an array (as in the examples included) or against a database by using the LIKE SQL statement.

Wishlist

Expose your ideas on the comments and I will list them in this small section. It seems that this dropdown keeps rocking, so why not make it better. Here goes mine:

1. Paging Results

*note from Miroslav -thanks*

When I use only jQuery plugin autocomplete, it doesn’t work. I have to change the position of div with suggestions by using jQuery .css(“left”,pos.left) and .css(“top”, pos.top + something), otherwise it fails on div.left() and div.top() functions, which aren’t defined.

Reason

This is happening because of the problem that some browsers have with CSS properties not specified as it happens with ‘display:’ style attributes. It is not a bug from the code but from the ‘our beloved browsers’. Thank you very much Miroslav for telling us about this bug.

Updates

14-05-2010  Animations are now using easing functions, linear or swing are available when using jQuery only, more are available from http://gsgd.co.uk/sandbox/jquery/easing/ – Martin Gotik

14-05-2010 Resizing of the list (when more or less items are displayed when typing text) is now animated too, I had to remove and add some elements for it to look smooth in all browsers – Martin Gotik

14-05-2010 The list isn’t hidden anymore when doing an AJAX call when the list is visible, looks more smooth IMHO – Martin Gotik

14-05-2010 Alert in AJAX request is disabled as mentioned by Carpes on the blog – Martin Gotik

05-03-2010 Animations are more dynamic now and available for both the hide and show event – Martin Gotink.

05-03-2010 Updated the browsing through the list with the keyboard. Thanks Martin Gotink.

05-03-2010 MaxResults and MaxHeight implemented. Thanks Martin Gotink.

05-03-2010 Tested all changes with jQuery 1.4.1 and 1.4.2 on IE 6/7/8, Opera 10.10/10.50, FF 3.5 and Chrome 4.0. IE took a bit more effort (especially the maxHeight option), but the result is (almost) the same on all browsers, only IE6/7 has some small issues with the scrollbar when maxHeight is set (some strange effects when using the mouse to drag the scrollbar). Thanks Martin Gotink.

05-03-2010 Tagged all my changes with MG in the .js and .css files in the attached .zip file, so you can see what i’ve changed, and why. Thanks Martin Gotink.

21-01-2010 Fixed style positioning. Thanks Konstantin.

IMPORTANT! All changes made by others will maintain their credits from now on. Apologies for those I didn’t include as I couldn’t update this blog as much as I want due to lack of time -Far too many projects under development.

DOWNLOAD

For some reason, some of you guys cannot download (I have downloads manager plugin for wordpress and it seems that is not working properly with this resource). For those having problems to download, please download the plugin here mirror download

IMPORTANT! Demo is within the download Link -thanks Lev for pointing me this misscommunication thing.

I have updated the link so now all of you shouldnt have problems to download. Sorry for the inconvenience.

download: Ajax Powered AutoComplete for JQuery (131.75KB) added: 17/01/2010 clicks: 5389

Tweet this!