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:

[html]
<select id="number" name="number">
<option/>
<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>
</select>
[/html]

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

[javascript]
Ext.onReady(function()
{
new Ext.form.ComboBox({
typeAhead: true,
triggerAction: ‘all’,
transform:’number’,
width:135,
forceSelection:true,
emptyText:’Select a number…’
});
});
[/javascript]

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 *