easyui combobox下拉框组件输入检索全模糊查询-Toy模板网

这篇具有很好参考价值的文章主要介绍了easyui combobox下拉框组件输入检索全模糊查询。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前引：

easyui下拉组件（combobox），输入检索下拉内容，是默认的右模糊匹配，而且不支持选择。因业务要求需要做成全模糊查询，目前网上搜索有两种方案：

1.修改easyui源码，这个得看运气，每个项目easyui版本不相同，文章里提供的源码位置我这个版本没有对应上；

2.自己改装下拉组件，这个非常耗时，而且不稳定。

成果展示：

easyui combobox下拉框组件输入检索全模糊查询,web前端,easyui,前端,javascript

开发思路：

easyui的下拉组件进行输入检索时，将不满足匹配的下拉选项隐藏起来。这里我们只需要在onChange方法里，将当前下拉框输入的内容和所有下拉选项去全模糊匹配，将满足的拉项显示出来即可；文章来源地址https://www.toymoban.com/news/detail-851720.html

代码：

<select
	id="test"
	class="easyui-combobox"
	style="width:150px;"
	data-options="
		valueField:'code',
		textField:'name',
		panelHeight:'200',
		editable:true,
		onChange: function(newValue, oldValue) {
            // 获取到所有下拉框元素
			$.each($('.combo-p'), function(i, n){
                // 只操作显示的下拉框元素
				if (i, $(n).css('display') == 'block') {
                    // 得到下拉框元素下所有的下拉选项
					let options = $(n).find('div .combobox-item')
					$.each(options, function(i, n){
                        // 进行全模糊匹配，匹配成功显示下拉选项
						let val = $(n).text()
						if (val && val.indexOf(newValue) >= 0) {
							$(n).css('display', 'block')
						}
					})
				}
		})
	}
">
	<option value="1">湖南</option>
	<option value="2">湖北</option>
	<option value="3">武汉</option>
	<option value="4">北京</option>
	<option value="5">上海</option>
	<option value="6">天津</option>
	<option value="7">南昌</option>
	<option value="8">内蒙古</option>
	<option value="9">新疆</option>
</select>

到了这里，关于easyui combobox下拉框组件输入检索全模糊查询的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！