扩展easyui的combobox组件的自动完成（autocomplete）-优快云博客

本文介绍了如何使用EasyUI插件为ComboBox实现通过用户姓名简拼进行自动匹配的功能，包括使用filter属性进行自定义匹配逻辑，并提供了一个实际应用的demo。此外，还分享了相关插件资源和远程Json数据源地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

update:现有有easyui插件直接提供了该功能。

可以请参考：http://www.easyui-extlib.com/ 里面combobox的根据拼音自动显示。里面各种插件造福大家。

——————————————————————————————————————————

easyui的combobox自带的自动完成，只能从第一个字符开始匹配，如果我想通过用户姓名的简拼或者中文名来匹配的话，就需要自己写扩展方法。

easyu自带的filter属性就是做这个用的。

页面的html，其中http://www.feelcal.com/easyui/json/mx.json是远程的Json数据地址：

<input class="easyui-combobox" id="c1"/>

JS代码如下：

$(function () {
        //用户名选择事件
        $("#c1").combobox({
            method: 'get',
            url: 'json/mx.json',
            valueField: 'id',
            textField: 'name',
            filter: function (q, row) {
                var ret = false;
                //拼音
                var spell = row['spell'];
                if (spell && spell.indexOf(q) >= 0) {
                    ret = true;
                }
                //textField
                if (row[$(this).combobox('options').textField].indexOf(q) >= 0) {
                    ret = true;
                }
                return ret;
            }
        });
    });

demo地址：http://www.feelcal.com/easyui/combobox.html

转载于:https://my.oschina.net/forai/blog/542684