easyui combobox开启搜索自动完成功能的实例代码

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"

}]

下面是代码示例

/**

* easyui combobox 开启搜索功能,自动装载选中的项目处理函数

*/

function onComboboxHidePanel() {

var el = $(this);

el.combobox('textbox').focus();

// 检查录入内容是否在数据里

var opts = el.combobox("options");

var data = el.combobox("getData");

var value = el.combobox("getValue");

// 有高亮选中的项目, 则不进一步处理

var panel = el.combobox("panel");

var items = panel.find(".combobox-item-selected");

if (items.length > 0) {

var values = el.combobox("getValues");

http:// el.combobox("setValues", values);

return;

}

var allowInput = opts.allowInput;

if (allowInput) {

var idx = 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的时候允许行显示。

//return row[$(this).combobox('options').textField].indexOf(q) > -1;

return row["spell"].indexOf(q) >= 0;

}

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。