easyui combobox开启搜索自动完成功能的实例代码
combo.json
[{
"id":-1,
"text":"",
"spell":""
},{
"id":1,
"text":"类型1",
"spell":"lx1"
},{
"id":2,
"text":"类型2",
"spell":"lx2"
},{
"id":3,
"text":"类型3",
"spell":"lx3"
},{
"id":4,
"text":"类型4",
"spell":"lx4"
},{
"id":5,
"text":"类型5",
"spell":"lx5"
}]
下面是代码示例
<form> <inputtype="text"id="combox1"> </form>
/**
*easyuicombobox开启搜索功能,自动装载选中的项目处理函数
*/
functiononComboboxHidePanel(){
varel=$(this);
el.combobox('textbox').focus();
//检查录入内容是否在数据里
varopts=el.combobox("options");
vardata=el.combobox("getData");
varvalue=el.combobox("getValue");
//有高亮选中的项目,则不进一步处理
varpanel=el.combobox("panel");
varitems=panel.find(".combobox-item-selected");
if(items.length>0){
varvalues=el.combobox("getValues");
el.combobox("setValues",values);
return;
}
varallowInput=opts.allowInput;
if(allowInput){
varidx=data.length;
data[idx]=[];
data[idx][opts.textField]=value;
data[idx][opts.valueField]=value;
el.combobox("loadData",data);
}else{
//不允许录入任意项,则清空
el.combobox("clear");
}
}
$("#combox1").combobox({
required:true,
editable:true,
missingMessage:'请选择装载物料',
valueField:"id",
textField:"text",
method:'get',
url:'combo.json',
mode:"local",
onHidePanel:onComboboxHidePanel,
filter:function(q,row){
//定义当'mode'设置为'local'时如何过滤本地数据，函数有2个参数：
//q：用户输入的文本。
//row：列表行数据。
//返回true的时候允许行显示。
//returnrow[$(this).combobox('options').textField].indexOf(q)>-1;
returnrow["spell"].indexOf(q)>=0;
}
});
以上这篇easyuicombobox开启搜索自动完成功能的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。