jquery.suggest, an Alternative jQuery Based Autocomplete Library

Update 2: After reading Peter-Paul Koch’s amazing book on Javascript, I’ve come to realize that the offset problem with the drop down in IE is probably caused by the use of em’s on padding/margins of autocomplete’s offsetParents.

Update 1: I realize the drop down is slightly off in IE 6&7, I think it has something to do with WordPress or K2′s stylesheets. Also, I’m in the process of updating the script to work better when the window is resized. Keep checking back here for more updates.

Try it:

jquery.suggest is my attempt at a jQuery autocompleter that functions much like Google Suggest. I used code and techniques from two popular jQuery autocompleters:

Originally, I used the first library in all my code but found that it just didn’t have the flexibility I needed and it had not been maintained in a long time. The biggest missing feature is the ability to run a function upon selecting something from the drop down.

While the Interface autocompleter seems to be rather up to date, there’s still a lot of problems with it. It’s tied to the Interface 1 library (which looks dead), the code with is supposed to help cover forms in IE doesn’t work over HTTPS and the caching system is so screwed up I ended up having to manually disabling it.

I also found that the two implementations acted differently in different browsers including IE 6&7, Firefox and Safari. Sometimes tab would select an item, sometimes it would move to the next element. Sometimes typing in something (which I didn’t want to match) and hitting enter would submit the form as usual, sometimes it would force me to select the first match.

Anyways, enough complaining, here’s the feature list:

  • Smart cache system that takes a maximum cache size in bytes and uses MRU list to discard items. Oh, and the caching works correcly.
  • Doesn’t assume that you have to choose an item from the drop down list. If an item is selected and you hit enter or tab, that item is copied to the element. Otherwise, hitting enter or tab works just like a normal element.
  • Event handler for selecting a drop down item.
  • Works the same in Firefox, Safari, IE 6&7.

It’s really easy to use, here’s the code for the suggest box above:

jQuery(function() { jQuery("#suggest").suggest("files/search.php",{ onSelect: function() {alert("You selected: " this.value)}}); });

Here’s the stylesheet and the source for the PHP file (blatantly stolen from autocomplete) which returns the items. And finally, download the source to the suggest library here. You can find more information about possible options at the bottom of the source.

The only requirement is jQuery itself and the dimensions plugin, although the script will try to use the bgiframe plugin if possible (to fix IE 6).