ハイライトカラーの自動完成検索ボックス

Question

extjsを使用して検索機能付きオートコンプリートドロップを実装します 検索ボックスに文字を入力すると、入力した文字をハイライト表示する必要があります 助けてください私はそのようなものを見つけることができるどこに私を参照してください

Answer 1

私は、貢献のおかげで電子メールとしての応答を得た。それは私のために働く。いずれかの完全なコードを望んでいるならば、彼らは私にメールで送信できBhaskara.ee@gmail.com

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>' 
) 
} 
});