Question

I am using ExtJs4.I have a form in my web application in which there is text box.The scenario is to provide an AJAX like search(like Google) when any key is pressed in the text box.Search will look into a web service and display the result(JSON object) in drop drown.Similar to Google search.

Is there any idea,link or tutorial for doing this?

Thanks

Answer 1

You could use ComboBox for this. With trigger or without one (that looks like a TextBox).

Sencha provides good examples:
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html

This is a simple example:

{
        xtype: 'combo',
        id: 'myCombo',
        store: Ext.create('Ext.data.ArrayStore', {
                model: Ext.define('ComboModel', {
                        extend: 'Ext.data.Model',
                        fields: ['id','data1','data2']
                }),
                proxy: {
                        type: 'ajax',
                        url : 'data.json',
                        reader: {
                                type: 'array'
                        }
                }

        }),
        triggerAction: 'query',
        minChars: 2,
        fieldLabel: 'Search',
        displayField: 'data1',
        msgTarget: 'side',
        triggerCls : 'x-form-search-trigger', // Search Icon For Instance
        listConfig: {
                getInnerTpl: function() {
                        return '<div>{data1}</div><div>{data2}</div>';
                }
        }
}

And JSON file:

[
    ['1','data1-1','data2-1'],
    ['2','data1-2','data2-2'],
    ['3','data1-3','data2-3'],
    ['4','data1-4','data2-4'],
    ['5','data1-5','data2-5']
]