我使用extjs实现了一个带有搜索功能的自动完成删除 如果我在搜索框中键入一个字符,我需要获得结果,突出显示我正在键入的字符 请帮助我完成它的工作是指我可以找到这样的东西
答案 0 :(得分: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>'
)
}
});