Using the YUI Autocomplete Control as a Combo Box

by Chadwick Wood
January 22nd, 2009

Yesterday I found this article showing how to add a button to the Yahoo UI Autocomplete Control to make it behave like a combo box (i.e. all of the autocomplete's suggestions are listed in a dropdown when the button is clicked).

I was working on doing exactly this before I found the article, but had run into some buggy behavior in my implementation. I was doing it basically the same way this article suggests, having the button call the Autocomplete's sendQuery() method, passing it an empty string. But the button would only work the first time it was clicked; after that, clicking the button would return no results in the Autocomplete.

What this article pointed out to me is that the input element for the Autocomplete should have focus before you call sendQuery(), to ensure the query results in the dropdown being populated. This behavior certainly seems like a bug to me. So, your code should go a little something like this:

// here, bAC is a reference to your YUI Autocomplete object
bAC.getInputEl().focus(); // Needed to keep widget active
bAC.sendQuery("");

I hope this post saves at least one person out there a big headache.