扩展easyui的combobox组件的自动完成(autocomplete)

原创
2015/12/11 10:43
阅读数 9.9K

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

 

展开阅读全文
打赏
1
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
1
分享
返回顶部
顶部