文档章节

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

forai
 forai
发布于 2015/12/11 10:43
字数 247
阅读 3962
收藏 3

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

 

© 著作权归作者所有

共有 人打赏支持
forai
粉丝 2
博文 31
码字总数 7456
作品 0
昆明
程序员
EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情
04/12
0
0
easyui之datagrid(combobox类型的editor)

easyui的datagrid使用combobox作为editor,从combobox的下拉列表选值并提交url。 比较简单,之前由于对easyui不熟,也没查到合适的教程,走了不少弯路,现终于实现,整理一下。 <script type...

一剑倾城
2015/10/28
0
0
easyui-combobox实现placeholder提示效果

<input class="easyui-combobox" name="language" data-options=" prompt:'请选择数据类型', url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', multiple:true,......

少年已不再年少
08/10
0
0
JQuery EasyUI combobox动态添加option

JQuery EasyUI combobox动态添加option <input class="easyui-combobox" id="rwlb" name="rwlb" style="width:435px" data-options="valueField:'id', textField:'text', panelHeight:'auto'......

Amamatthew
2014/10/03
0
0
.NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错。 我们框架的组织机构结合实际分成...

NET快速开发框架
07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Minifilter的动态安装、加载及卸载

MINIFILTER框架的文件系统过滤驱动,无法使用的CreateService和OpenService进行动态加载。 看了一下,使用Inf文件安装Minifilter驱动的方式是在注册表驱动服务项下比传统驱动多创建了Instanc...

simpower
12分钟前
0
0
idea新建springCloud项目(6)- Config Server使用

1.在IDEA新建springCloud项目-Config Server 修改版本,和之前建的eureka项目版本一致,修改完记得刷新: 删除掉不需要的文件: 2.把Config S 服务注册到eureka上去,配置git地址,启动项目 ...

monroeCode
17分钟前
3
0
大数据可视化项目开发总纲

第1章 开发文档总纲 1.1 开发工具清单 名称 版本 备注 Pentaho-bi server pentaho-server-ce-7.1 Pentaho Cde为其内置工具 Pentaho-prd pentaho-prd-ce-7.1 Pentaho Report Designer报表工具...

ZhangLG
18分钟前
1
0
pip安装超时问题

pip3 install --default-timeout=100 tensorflow 设置为100秒 参考: User Guide How to solve ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443) with pip?......

亚林瓜子
19分钟前
0
0
fragment 旋转时保持当前实例

设备旋转时保存Fragment的交互状态: setRetainInstance(true);

zdglf
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部