Easily convert existing combobox to autocomplete with Ext JS

By | September 2, 2009

I’m impressed with at least one feature of Ext JS. If you want to convert an already existing select to an autocomplete-enabled combobox/textbox, it’s ridiculously easy.

Given this combobox:

<select id="number" name="number">
<option value="1">ONE</option>
<option value="2">TWO</option>
<option value="3">THREE</option>
<option value="4">FOUR</option>
<option value="5">FIVE</option>
<option value="6">SIX</option>

To convert this select box into an autocomplete combobox/textbox with Ext JS takes just a tiny bit of JavaScript:

new Ext.form.ComboBox({
typeAhead: true,
triggerAction: ‘all’,
emptyText:’Select a number…’

Such a simple way to turn a typical dropdown into an autocomplete combo box.

Picture gallery

Original dropdown

Original dropdown

Autocomplete dropdown, nothing selected title=

Autocomplete dropdown with no selections (using Ext JS)

Autocomplete in action

Autocomplete in action

Leave a Reply

Your email address will not be published. Required fields are marked *