Why I gave up on JQuery UI's autocomplete

20 October 2010   3 comments   Javascript


Powered by Fusion×

I was happily using Jörn Zaefferer's jQuery autocomplete plugin but then I found out that it had been deprecated and I should instead use the jQuery UI's autocomplete plugin instead.

After "upgrading" I started getting suspicious. Is it actually worse than the old one?

First, about the CSS. If you're not already loading the jQuery CSS you would have to add an extra 21,000 bytes file (which loads 80Kb of images) as opposed to the old jquery.autocomplete.css which was only 810 bytes.

Secondly, the new jQuery UI Autocomplete plugin didn't support any nice highlighting so you have to write your own and it can quickly get ugly. I wrote one myself and it gets nasty and you have to do your own escaping.

Thirdly, if you just need the autocomplete you'll also need UI core, UI position and UI widget. The minified file weighs in on 19Kb. The packed jquery.autocomplete.pack.js weighs in on just 8Kb.

Fourthly, speed. The jQuery UI Autocomplete feels more sluggish in loading and rendering. Granted, in my work I often have Firebug switch on but just generally it feels slower when using. Perhaps I've made it extra slow with my hackish attempt to make it highlight.

But... Although the list of options available in the old Autocomplete the number of options available in the new jQuery UI Autocomplete seems pretty nifty too. You mileage will vary. Another benefit of the jQuery UI Autocomplete is that it now seems the more maintained project. I don't see a lot of activity but at least it doesn't say "Deprecated" like it does on the old Autocomplete.


Waldemar Kornewald
We've published the source of our autocomplete fork here:


It provides a much better user experience. E.g., you can click, hold the mouse button, and move the cursor. In the original implementation this would select text. Now it behaves like the desktop counterpart. Also, when you click inside the text box it'll automatically open a little tooltip indicating that this text field has auto-completion. Too often this is far from obvious. Also, the text field has a mode in which it acts like a drop-down field with auto-completion.
I have many issues with the new official plugin as well.

For instance, the delay does not seem to work consistently - try setting up an autocomplete with a remote source, set the delay to say 3 seconds, then keep spamming any character key - the autocomplete should never trigger the ajax request, but after the initial 3 seconds, it triggers constantly.

or try hitting a space, then the autocomplete will trigger after every single character thereafter.
Michael Morgenstern
To be fair, a lot of that load is already cached by the browser.

Your email will never ever be published

Related posts

Nasty JavaScript wart (or rather, don't take shortcuts) 18 October 2010
How I made my MongoDB based web app 10 times faster 21 October 2010
Related by keywords:
Difference between $.data('foo') and $.attr('data-foo') in jQuery 10 June 2012
Lesson learnt with creating DOM element with jQuery 04 April 2008
What makes my website slow? DNS 23 October 2009
jQuery and Highslide JS 08 January 2008
In jQuery, using the :visible selector can be dangerous 14 September 2010
apple.com/store doesn't work in Firefox (on Linux) 19 March 2008
Why Django and Grok matters 02 February 2008
QUnit testing my jQuery Mobile site in full swing 17 March 2011
Javascript tip: nifty use of the console.log function in Firebug 07 November 2010
ToDo apps I gave up on in 2010 03 January 2011
JetBlue a good and bad website 22 February 2007
To $('#foo p') or to $('p', $('#foo')) 24 February 2009