easyui combobox开启搜索自动完成功能的实例代码
投稿:jingxian
下面小编就为大家带来一篇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> <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开启搜索自动完成功能的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- jQuery EasyUI API 中文文档 - ComboBox组合框
- jquery easyui combobox模糊过滤(示例代码)
- jQuery+easyui中的combobox实现下拉框特效
- EasyUI中combobox默认值注意事项
- Easyui form combobox省市区三级联动
- 如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
- jQuery EasyUI编辑DataGrid用combobox实现多级联动
- Easyui的combobox实现动态数据级联效果
- EasyUI Combobox设置默认值 获取text的方法
- EasyUI学习之Combobox级联下拉列表(2)