I have a page where my combo box has hundreds of elements which makes it very hard to pick the one item I want. Is there a good Javascript replacement that would do better than

<select id="field-component" name="field_component"> 
                  <option selected="selected">1</option><option>2</option>...
</select>

Is there something with "Intellisense"-like auto-complete?

I have a page where my combo box has hundreds of elements which makes it very hard to pick the one item I want. Is there a good Javascript replacement that would do better than

<select id="field-component" name="field_component"> 
                  <option selected="selected">1</option><option>2</option>...
</select>

Is there something with "Intellisense"-like auto-complete?

• javascript
• html
• combobox
• dhtml

7 Answers 7

In HTML 5 there's standard combo box.

Currently only Opera supports it, but if you happen to be time traveller or writing Opera-only application, it's a nice solution :)

<input type=text list=listid>
<datalist id=listid>
  <select><option>1<option>2</select>
</datalist>

Check the jQuery Autocomplete plugin, it's easy to use, you only have to generate a JSON response server side.

See this demos.

You have dhtmlCombo, using ajax to retrieve data when you are filling the input field.

dhtmlxCombo is a cross-browser JavaScript combobox with autocomplete feature.

It extends basic selectbox functionality to meet the requirements of the most up-to-date web applications.

dhtmlxCombo can be converted from existing HTML SELECT or populated with JavaScript. Supporting AJAX, it can also get list values from the server datasource dynamically.

The autocompleter using Prototype and Scriptaculous works well in this situation.

Just a note: If the select box is current focused, you can type on your keyboard and it will take you to the selection beginning with that text, so typing "k-e-n" into a US State dropdown would auto-select the "Kentucky" option.

You can try this combobox realization http://www.zoonman.com/projects/combobox/

• Pure JavaScript. Editable. Supports IE6.
• Nonstandard HTML layout.

I think Twitter's free typeahead.js library is the best autocomplete library available today. Check it out at http://twitter.github.io/typeahead.js/