How can I use a select box with jQuery AutoComplete?

Question

Right now I have my Autocomplete widget in a text box. Ideally, it would be a Select box, but I can't figure out how to let somebody type in a select box.

So I am relegated to having a text box and a hidden box. The hidden box should get updated with the id of what displays in the text box.

I am pretty new to jQuery, at least on an in-depth level like this. Am I making this harder than I need to? I definitely need autocomplete, because there are potentially hundreds of thousands of possible values.

Answer 1

You should look into the jQuery plugin called chosen .
I think it's the best jQuery plugin written in the past year (or more).

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

Answer 2

There is a very good alternative for "chosen" - "Select2" (jQuery only) .

"Select2" use cases

• Enhancing native selects with search.
• Enhancing native selects with a better multi-select interface.
• Loading data from JavaScript: easily load items via ajax and have them searchable.
• Nesting optgroups: native selects only support one level of nested. Select2 does not have this restriction.
• Tagging: ability to add new items on the fly.
• Working with large, remote datasets: ability to partially load a dataset based on the search term.
• Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
• Templating: support for custom rendering of results and selections.

Answer 3

There is a great example of precisely this on the jQueryUI demo page for autocomplete. It actually uses a select element as the backing store.

You could easily modify this to use a remote data source. If you need the source to be remote, let me know and I can provide an example.