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

前引:

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

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

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

成果展示:

开发思路:

        easyui的下拉组件进行输入检索时,将不满足匹配的下拉选项隐藏起来。这里我们只需要在onChange方法里,将当前下拉框输入的内容和所有下拉选项去全模糊匹配,将满足的拉项显示出来即可;

代码:

<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>

  • 10
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui combobox下拉框默认是单选的,如果要实现多选,需要做以下修改: 1. 在combobox的options中添加multiple:true,表示启用多选模式。 2. 在combobox的options中添加onSelect和onUnselect两个事件,用于在选择和取消选择时更新选中的值。 3. 在combobox的panel中添加checkbox或者复选框,用于选择多个选项。 以下是实现多选的示例代码: HTML代码: ``` <input id="cc" class="easyui-combobox" style="width:200px;"> ``` JavaScript代码: ``` $('#cc').combobox({ url: 'get_data.php', valueField: 'id', textField: 'text', multiple: true, panelHeight: 'auto', onSelect: function(record){ var value = $(this).combobox('getValues'); value.push(record.id); $(this).combobox('setValues', value); }, onUnselect: function(record){ var value = $(this).combobox('getValues'); var index = value.indexOf(record.id); if (index >= 0){ value.splice(index, 1); } $(this).combobox('setValues', value); }, onLoadSuccess: function(){ var data = $(this).combobox('getData'); var value = $(this).combobox('getValues'); var panel = $(this).combobox('panel'); panel.find('.combo-panel-checkbox').remove(); $.each(data, function(index, item){ var checkbox = $('<input type="checkbox" class="combo-panel-checkbox">').val(item.id); if (value.indexOf(item.id) >= 0){ checkbox.prop('checked', true); } checkbox.insertBefore(panel.find('.combo-panel-list')); }); }, onShowPanel: function(){ var data = $(this).combobox('getData'); var value = $(this).combobox('getValues'); var panel = $(this).combobox('panel'); panel.find('.combo-panel-checkbox').prop('checked', false); $.each(data, function(index, item){ if (value.indexOf(item.id) >= 0){ panel.find('.combo-panel-checkbox[value="'+item.id+'"]').prop('checked', true); } }); } }); ``` 注:示例代码中的get_data.php是一个返回JSON格式数据的接口,可以根据实际情况修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值