有朋自远方来,不亦乐乎。
EasyUI combobox(组合框) 插件支持模糊搜索功能
发布于 2年前 ( 2016-10-29 ) 阅读: 1,636 次 评论: 6 条 百度已收录 隐藏边栏

最近接手的项目使用的是的前端框架,之前也有稍微使用过,但是用的不多,这次工作需要用到的,得好好取用。这里记一下平时使用EasyUI的一些问题。

,组合框,也就是下拉列表框,相信使用这个功能的开发者,一般都会喜欢模糊搜索吧,要不然类似查询公司这种列表的,一个地区的公司,我还得一个个输入地区再输入公司名,就会觉得很繁琐。

EasyUI框架已经自带搜索过滤的方法了,只是必须从头匹配的,实现也很简单,稍微改一处地方就好。

查找我们的EasyUI代码库

第一种方法(单处支持模糊搜索)

在combobox需要用到模糊搜索的时候添加filter

$('#user').combobox({  
    valueField : 'userId',  
    textField : 'userName',  
    editable:true ,  
    required: true,  
    filter: function(q, row){  
        var opts = $(this).combobox('options');  
        return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= -1;
    },  
    data : d.rows,  
});
第二种方法(全局支持模糊搜索)
filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) == 0;
	}

只需将我们的 == 0 改为 >= -1 即可

return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= -1;// 将从头匹配改为任意匹配

改完回头再看,是不是已经支持了呢。

搞定了,很简单吧。

更多combobox(组合框)的使用方法可查看 官方文档 说明

目前评论:6   其中:访客  4   博主  2

发表评论

有人回复时邮件通知我

请稍候,正在加载新评论...
  1. 橘子书 ( 2016.11.01 15:49:02 ) 福建省漳州市 电信 | Windows 10 | Chrome 53.0.2785.104 #1

    来消灭0回复。哈哈!

  2. 橘子书 ( 2016.11.01 15:55:52 ) 福建省漳州市 电信 | Windows 10 | Chrome 53.0.2785.104 #2

    来消灭0回复。哈哈!

  3. 山野愚人居 ( 2016.11.09 18:39:08 ) 塔吉克斯坦 | Windows 7 | Firefox 49.0 #3

    用过的TP的后台框架,前端没用过!

    • 晓庄 ( 2016.11.10 12:45:36 ) 浙江省杭州市 阿里云BGP数据中心 | iPhone 9_0_2 | Safari 601.1

      @山野愚人居 好用吗

  4. themebetter ( 2016.11.10 10:24:54 ) 河南省信阳市 联通 | Windows 10 | Chrome 47.0.2526.80 #4

    方法不难。

    • 晓庄 ( 2016.11.10 12:46:04 ) 浙江省杭州市 阿里云BGP数据中心 | iPhone 9_0_2 | Safari 601.1

      @themebetter 是的呢。