easyui combobox开启搜索自动完成功能的实例代码
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇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" }]
狼蚁网站SEO优化是代码示例
<form> <input type="text" id="combox1"> </form>
/** * 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"); 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; } });
以上这篇easyui combobox开启搜索自动完成功能的实例代码就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。