Auto complete search box with highlight color

Question

I implement a an auto complete drop with search functionality using extjs If I type a character in an search box i need get the results with highlight the characters what I am typing Please some help me do get it done are refer me where I can find such thing

Answer 1

i got the response as an email, thanks for contribution. It's works for me. If any wants the complete code they can email me [email protected]

app.js

Ext.application({
requires:['Test.view.components.TypeAhead'],
name:'Test',
appFolder: 'app',
launch:function(){
    var addOrg = Ext.create('widget.TypeAhead', {
        width:500,
        id:'addOrgSearch',
        typeAheadLabel: 'Lead Analyst :',
        hideTrigger:true,
        typeAhead: true,
        minChars:3,
        labelWidth: '30%',
        queryMode: 'local',
        displayField: 'name',
        valueField: 'name',
        forceSelection:true,
        selectOnFocus:true,
        enableKeyEvents: true,
        disableKeyFilter : true,
        mode : 'local',
        triggerAction: 'all',
        addSearchFilterValues:'',
        listeners:{
            typeAheadEvent: function(addOrg, e, eOpts){
                    if((addOrg.getRawValue().length != 0) && (addOrg.getRawValue().length>=3))
                    {
                         this.setAddSearchFilterValues(addOrg.getRawValue().toUpperCase());
                         this.updateAddOrg(addOrg.getRawValue().toUpperCase());
                    }
            }
        },

        renderTo: Ext.getBody()
    });

}
});
Test.view.components.TypeAhead.js

Ext.define("Test.view.components.TypeAhead", {
extend:"Ext.form.field.ComboBox",
alias: "widget.TypeAhead",
name:'typeAhead',
config: {
    dataProvider : [],
    hideTrigger: '',
    typeAheadLabel:'',
    typeAhead: '',
    minChars:'',
    forceSelection:'',
    labelWidth:'',
    queryMode: '',
    displayField: '',
    valueField: '',
    forceSelection:'',
    labelWidth: '',
    addSearchFilterValues:''
},
applyDataProvider: function(dataProvider){
        //this.addEvents('typeAheadEvent');
        //alert(dataProvider);
        //this.addEvents('typeAheadEvent');
        return dataProvider;
    },
constructor: function(config){
    this.callParent(arguments);
    this.initConfig(config);
},

initComponent: function(){  
    this.fieldLabel = this.typeAheadLabel;
    this.on('keyup',function(addOrg, e, eOpts){
        this.fireEvent('typeAheadEvent',this,e, eOpts);

    });
    this.callParent(arguments);
},
updateAddOrg: function(searchStr){
    this.addPreloader('Getting Organizations...');
    var data = {"test":
    {"searchOrgList":[
                        {
                            "abbr": "AL",
                            "name": "Alabama",
                            "search": "",
                            "slogan": "The Heart of Dixie"
                        }, {
                            "abbr": "AK",
                            "name": "Alaska",
                            "search": "",
                            "slogan": "The Land of the Midnight Sun"
                        }, {
                            "abbr": "AZ",
                            "name": "Arizona",
                            "search": "",
                            "slogan": "The Grand Canyon State"
                        }, {
                            "abbr": "AR",
                            "name": "Arkansas",
                            "search": "",
                            "slogan": "The Natural State"
                        },{
                            "abbr": "AR",
                            "name": "Arkansasa",
                            "search": "",
                            "slogan": "The Natural State"
                        },{
                            "abbr": "AR",
                            "name": "Arkansasv",
                            "search": "",
                            "slogan": "The Natural State"
                        },{
                            "abbr": "AR",
                            "name": "Arkansas",
                            "search": "",
                            "slogan": "The Natural State"
                        }]
    }};
    var cmb = Ext.ComponentQuery.query('#addOrgSearch')[0];
    var parsedData = [];

    for(var i = 0; i < data.test.searchOrgList.length; i++)
    {
        parsedData[i] = [data.test.searchOrgList[i].id,data.test.searchOrgList[i].name,this.getAddSearchFilterValues()];
    }
    var mystore = Ext.create('Ext.data.ArrayStore', {
        fields: [
            'abbr','name','search','slogan'
        ],
       data: parsedData
    });

     cmb.store.removeAll();
     cmb.store = mystore;
     cmb.bindStore(mystore);
     Ext.getBody().unmask();
     cmb.expand();
  },
    addPreloader:function(message){
        var splashscreen;
        splashscreen = Ext.getBody().mask(message, 'splashscreen');
        splashscreen.addCls('splashscreen');
    },
  listConfig:{
            tpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<tpl if="this.returnParsed(search,name)"> ',             
                '<div class="x-boundlist-item"><font style=background-color:#FFFF5D;color:#000000;><B>{[this.getBeforeReturn(values.name,values.search)]}</B></font><font style=background-color:#FFFF5D;color:#000000;><B>{[this.getReturn(values.name,values.search)]}</B></font>{[this.getAfterReturn(values.name,values.search)]}</div>',
        '<tpl else>',
         '<div ><p><font size="1">nodata</font></p></div>',
      '</tpl>',
  '</tpl>',
      {
        returnParsed: function(search,name){
            return true;
        },
        getReturn: function(name,search){
            //alert(search.charAt(search.length-1)+">>getReturn");
                return search.charAt(search.length-1);
        },
        getBeforeReturn : function(name,search){
            //alert(str+">>getBeforeReturn");
               var str = search.substring(0,search.length-1);
                return str;
        },
        getAfterReturn: function(name,search){
            //alert(name.substring(search.length,name.length)+">>getAfterReturn");
            return name.substring(search.length,name.length);
        } 
    }
),
  displayTpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<tpl if="name.length == 0"> ',             
                '<div ><p><font size="1">{search}</font></p></div>',
        '<tpl else>',
                '{search}', 
        '</tpl>',                                  
        '</tpl>'
  )
}   
});