Monday, August 07, 2006

autocomplete plugin (for jQuery), by Dylan Verheul

A handy plugin for adding auto complete capabilities to your web pages - autocomplete. Start typing in a bird name to see it in action.

2 comments:

Dallan Quass said...

This is a terrific plugin. Thank-you!

I wanted to make you aware of a workaround for a Safari bug. In Safari, the preventDefault function doesn't work on keydown, so when the user presses enter to select an item from the list, the form's submit action is performed. As far as I can tell, the only way around this is to disable form submission for a short period of time. So I added the following code:

// put this in the variable declaration section above the keydown event
var returnFalse = function() { return false; };

// put this in the case for keyCode's 9 and 13
// options.formId is the id of the form associated with the input box
if (options.formId && e.keyCode == 13) {
$('#'+options.formId).bind('submit',returnFalse)
if (formTimeout) clearTimeout(formTimeout);
formTimeout = setTimeout(enableForm, 250);
}

// new function
function enableForm() {
if (formTimeout) clearTimeout(formTimeout);
formTimeout = null; //necessary?
$('#'+options.formId).unbind('submit',returnFalse);
}

Due to another Safari quirk, the above code causes the results div to not be hidden after the user presses Enter. To get around this, I had to change the hideResultsNow() call in the selectItem function to hideResults(1), where 1 is a new parameter to hideResults that specifies the number of ms delay on the timer.

At this point Safari works great.

Sam said...

If you post a message to the jQuery Mailing list detailing this fix, he may be able to apply it to his plugin.