Easily convert existing combobox to autocomplete with Ext JS

Posted in programming, web development on 09/02/2009 02:34 am by ashlux

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/>
        <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>

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

    Ext.onReady(function()
    {
        new Ext.form.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            transform:'number',
            width:135,
            forceSelection:true,
            emptyText:'Select a number...'
        });
    });

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