EasyUI combobox下拉列表实现搜索过滤(模糊匹配)
Posted qq545505061
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI combobox下拉列表实现搜索过滤(模糊匹配)相关的知识,希望对你有一定的参考价值。
项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能。看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便。于是就记录一下模糊匹配的方案。
实现效果:
这里使用的是combobox组合框,对于combobox的创建可以使用<input>输入框,也可以使用<select>下拉选。我使用的是<select>:
html代码
<label>关联课程</label> <select class="easyui-combobox" name="itemsId" id="itemsId" style="width:135px;height:25px;"> <option>请选择关联课程</option> </select>
然后通过js从远程获取数据并实现搜索功能:
$("#itemsId").combobox( url: "xxxxxx", editable: true, valueField: ‘id‘, textField: ‘name‘, panelWidth: 220, // 下拉框宽度 panelHeight: 250, // 下拉框高度 filter: function(q, row) var opts = $(this).combobox(‘options‘); return row[opts.textField].indexOf(q) > -1; );
因为需要输入查询,所以下拉项必须得可编辑。使用combobox创建下拉项默认是可以编辑的,设置 editable: true 虽然感觉很鸡肋,但看起来功能更清晰。
filter:定义函数如何过滤数据,return row[opts.textField].indexOf(q) == 0时只能前缀匹配, return row[opts.textField].indexOf(q) > -1 就是模糊匹配了。
这样模糊匹配的功能就实现了。随便记录一下默认显示值的问题。
在修改数据时默认得显示设置的值,也就是加载的选择项selected=true,一开始我是想使用formatter函数将获取的列表数据选中的项添加selected属性为true,但这种方式会导致下拉列表显示为空白
所以这种方式是不可行的,于是就寻求了其他方式,发现了解决方案:
通过combobox的select方法:
只需添加下面这行代码就行,在combobox创建前后都可以。
$("#itemsId").combobox("select", rows.name)
这是通过combobox的select方法选择指定的选项,“rows.name”可以是option的value,也可以text。
当然也可以在combobox的onLoadSuccess事件,从远程数据加载成功时处理(这种方式就太累赘了,只是为了记录一下onLoadSuccess的使用):
$("#itemsId").combobox( url: ‘xxxx‘, editable: true, valueField: ‘id‘, textField: ‘kcName‘, panelWidth: 220, panelHeight: 250, filter: function(q, row) var opts = $(this).combobox(‘options‘); return row[opts.textField].indexOf(q) > -1; , onLoadSuccess: function(data) for(var i = 0; i < data.length; i++) if(data[i].id == rows.itemsId) $("#itemsId").combobox("select", data[i].id) );
以上是关于EasyUI combobox下拉列表实现搜索过滤(模糊匹配)的主要内容,如果未能解决你的问题,请参考以下文章
关于EasyUI ComboBox(下拉列表框)能否直接输入文本的问题,详情如图所示。