Saturday, January 8, 2011

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.




6 comments:

  1. sir im new to extjs,i need a code for getting the text which is being displayed in combobox,and it should be displayed in other combobox,or textbox...pls help me.thanks

    ReplyDelete
  2. Hi,

    You can try following code.

    var value=Ext.getCmp('comboboxid').getValue(); This will give you the current value of combo box and then use following code to set the value in other component like combo box or textbox.

    Ext.getCmp('componentid').setValue(value);

    ReplyDelete
  3. Hi Hiren,

    I want to convert the state/province drop down into an auto suggest text box in magento. What are the steps need to follow to get it done by the solution provided by you. any help will be appreciated.

    Thanks in advance.

    ReplyDelete
  4. Well, Magento drop down is totally different case because it's a pure HTML select control. For that you can use some jQuery plugins which are available.

    ReplyDelete
  5. Hi Hiren,
    i am new to extjs, i am facing difficulty in solving following requirement,

    In combobox a drop down list is there.extjs filters the list when we enter any text characters like 'b'... which will display all words starting with 'b'.

    Requirement:

    while filtering values in combo box, a '?'(question mark) specifies any match from a to z and 0 to 9

    Example:i have a list of values like 1.raja 2.123 3.ram 4.1021

    1.In the combobox if i enter '?' it should display all values

    2.If i enter '?a' it should display raja,ram

    3.If i enter '?2?' it should display 123

    4.If i enter '?0?1' it should display 1021

    Thanks,

    Rajasekhar

    ReplyDelete
  6. Note: i have to filter autosuggestion box.

    ReplyDelete