Turn ExtJs combo box to Auto Suggest Textbox

First of all this is the first blog of 2011 so wish you a very "Happy New Year"

Recently I was working on ExtJs project. Where I got a requirement to create auto suggest text box. So I was planning to extend ExtJs text field class and add my own methods and properties to make it auto suggest.

Before I start development, I was going through document of ExtJs combo box and suddenly I show a following property description in docs.

hideTrigger : Boolean

true to hide the trigger element and display only the base text field (defaults to false)

It hides the extreme right arrow in combo box and displays only base text box. When user enters some characters in text box it displays relevant combo box values. See the image below.

So that's it by setting just one property in combo box you got your auto suggest text box.

Following is the code .

var autoSuggestTextBox = new Ext.form.ComboBox{

store: mystore,

displayField:'display_field',

id : 'mycombo',

name : 'mycombo',

valueField : 'value_field',

typeAhead: true,

mode: 'local',

triggerAction: 'all',

emptyText:'Select......',

selectOnFocus:true,

hideTrigger: true,

width: 250,

listeners:{

select:{

fn:function(combo,record,index) {

}

}

}

}

This saved my complete day else I would have written a code to create auto suggest text box from scratch. So I thought of sharing this so it can save your time also.