easyui combobox开启搜索自动完成功能

Posted 左正

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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开启搜索自动完成功能的主要内容,如果未能解决你的问题,请参考以下文章

easyui-combobox下拉菜单自动补全功能,Ajax获取远程数据源

请问如何用easyui的combobox实现中文搜索

EasyUI combobox下拉列表实现搜索过滤(模糊匹配)

jquery easyui combobox怎么设置忽略大小写搜索

利用easyUI的combobox打造自己主动提示组件

easyui 很多个combobox怎么从数据库搜索数据赋