文档章节

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

forai
 forai
发布于 2015/12/11 10:43
字数 247
阅读 4055
收藏 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里的disabled设置

在设置禁用和可用的时候,尝试过的写法有: $('#ID').combobox('enable'); $('#ID').combobox('disable'); 也尝试过: $("#ID").combobox("disabled",false); $("#ID").combobox("disabled",tru......

文文1
2016/09/20
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

没有更多内容

加载失败,请刷新页面

加载更多

Java并发编程:volatile关键字解析

volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在Java 5之后,volatile关键字才得以重获生...

engeue
13分钟前
0
0
通过ajax访问远程天气预报服务

http://www.webxml.com.cn/zh_cn/index.aspx 更改wsdl文件 打开文件将15行,51行,101行去掉 然后把文件复制到c盘 然后在桌面上面就生成了文件 将文件打成jar包 package cn.it.ws.weather;...

江戸川
今天
1
0
聊聊storm的tickTuple

序 本文主要研究一下storm的tickTuple 实例 TickWordCountBolt public class TickWordCountBolt extends BaseBasicBolt { private static final Logger LOGGER = LoggerFactory.getLogg......

go4it
今天
1
0
自动装箱和自动拆箱

自动装箱和自动拆箱 Java 提供了 8 种基本数据类型,每种数据类型都有其对应的包装类型,包装类是面向对象的类,是一种高级的数据类型,可以进行一些比较复杂的操作,它们是引用类型而不再基...

tsmyk0715
今天
2
0
简易审计系统

1、有时候我们需要对线上用户的操作进行记录,可以进行追踪,出现问题追究责任,但是linux自带的history并不会实时的记录(仅仅在内存中,当用户正常退出(exit logout )时才会记录到history文件里...

芬野de博客
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部