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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/540339.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Windows联网状态工具TCPView

文章目录 TCPView命令行工具更多Sysinternals Suite工具 TCPView TCPView用于显示系统上所有 TCP 和 UDP 终结点的详细列表&#xff0c;包括本地和远程地址以及 TCP 连接的状态&#xff0c;界面如下。 列表的表头含义如下 表头含义表头含义Process name应用名称Process id进程…

STM32H7各块RAM的位置和作用

STM32H7各块RAM的位置和作用 RAM各块RAM的特性各块RAM的时钟问题RAM分配方案 摘抄于armfly-V7开发板bsp手册&#xff0c;仅供个人学习。 RAM 这个图可以方便识别总线所外挂的外设&#xff0c;共分为三个域&#xff1a;D1 Domain&#xff0c;D2 Domain 和 D3 Domain。 ◆ ITCM 和…

【Hello算法】 > 第 2 关 >数据结构 之 数组与链表

数据结构 之 数组与链表 1&#xff1a;Understanding data structures &#xff01;——了解数据结构——1.1&#xff1a;Classification-分类-1.2&#xff1a;Type-类型- 2&#xff1a;Arrays are the bricks that make up the wall of data structures *——数组是组成数据结…

【Java核心能力】美团优选后端一面:Java 八股文相关内容

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…

基于分布式鲁棒性的多微网电氢混合储能容量优化配置——1

Optimal configuration of multi microgrid electric hydrogen hybrid energy storage capacity based on distributed robustness A B S T R A C T 储能与微电网相结合是解决分布式风能、太阳能资源不确定性、降低其对大电网安全稳定影响的重要技术路径。随着分布式风电和太阳…

Web自动化测试进阶:网页中难点之等待机制 —— 强制等待,隐式等待

为什么要添加等待 避免页面未渲染完成后操作&#xff0c;导致的报错 经常会遇到报错&#xff1a;selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":&q…

架构设计参考项目系列主题:新零售SaaS架构:客户管理系统架构设计

什么是客户管理系统? 客户管理系统,也称为CRM(Customer Relationship Management),主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理,吸引和留存客户,实现缩短销售周期、降低销售成本、增加销售收入的目的,从而提高企业的盈利能力和竞争力。 …

java-spring 图灵 02 手写spring

01.idea中创建一个maven管理的空项目 02.模拟创建出spring容器类&#xff0c;这里叫wzpApplicationContext&#xff0c;创建的时候会自动加载配置类的数据 public class wzpApplicationContext {private Class configClass;public wzpApplicationContext(Class configClass) …

Selenium+TestNG学习笔记

------------------TestNG-------------------- 1.层级 suite -》test-》class-》method 建议层级 class对应一个测试用例&#xff0c;suite对应一个测试集 2. testNG中的PO模式 3.运行多个测试类的测试用例 通过suite来进行管理;suite在testNG中可以通过xml 来进行编写管理…

多媒体互动装置如何助力智慧城市展厅的信息化建设?

随着现代化科技技术的发展&#xff0c;智慧城市的建设概念与实施也日益成熟&#xff0c;其中智慧城市展厅便是用于展示智慧城市理念、技术和规划的重要平台&#xff0c;而应用在其中的多媒体互动装置&#xff0c;更是起着重要的作用&#xff0c;它们能够让观众更直观地了解和体…

浅述.Net中的Hash算法(顺带对称、非对称算法)

【写在前面】 对称加密算法(只有一个私钥&#xff0c;比如DES【不推荐】、AES)&#xff1b; 非对称加密算法&#xff08;公钥与私钥&#xff0c;比如RSA&#xff09;&#xff1b; Hash算法也称为散列函数算法&#xff0c;任意长度的数据都转换为固定长度的字符串&#xff08…

关闭 SPI 会导致 WRPERR 错误的问题分析

1. 引言 在 STM32 的应用中&#xff0c;SPI 算是用的比较多的外设了&#xff0c;也是单片机最常见外设之一。客户说它执行了关闭 SPI 的代码&#xff0c;竟然会导致 Flash 中的 WRPERR 标志置位&#xff0c;致使应用碰到一些问题。这就奇怪了&#xff0c;SPI 和内部 Flash 看起…

中仕公考:三支一扶期满后有编制吗?

三支一扶两年的期限到达之后&#xff0c;会自动获得编制吗? 完成三支一扶项目的服务期限后&#xff0c;参与人员必须通过正式的考试才能获得编制&#xff0c;而并不是期满后自动获得编制。但是&#xff0c;三支一扶服务期满人员在参加公务员考试中可依照其身份享受加分的优惠…

h5应用如何适配移动端(干货总结)

h5应用如何适配移动端总结 前言一、简单场景搭建二、从哪些方面进行适配?1.对html中的meta标签进行适配2.清除默认样式3.使用全局变量去控制采用css值4.绝对单位相对化 前端必备工具推荐网站(免费图床、API和ChatAI等实用工具): http://luckycola.com.cn/ 前言 H5应用的开发是…

基于springboot实现视频网站管理系统【项目源码+论文说明】计算机毕业设计

基于springboot实现视频网站管理系统演示 摘要 使用旧方法对视频信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在视频信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问…

AndroidAutomotive模块介绍(一)整体介绍

前言 Android Automotive 是一个基本 Android 平台&#xff0c;可运行 IVI 系统中预安装的 Android 应用以及可选的第二方和第三方 Android 应用。 本系列文档将会系统的介绍 Android Automotive 的功能、架构、逻辑等。模块逻辑将从 应用api接口、系统服务、底层服务&#x…

2024.4.12每日一题

今天上午参加了蓝桥杯&#xff0c;只会暴力&#xff0c;还需努力学习 LeetCode 找到冠军 || 题目链接&#xff1a;2924. 找到冠军 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 一场比赛中共有 n 支队伍&#xff0c;按从 0 到 n - 1 编号。每支队伍也是 有向无环图…

泰坦尼克号幸存者预测

泰坦尼克号幸存者预测 1、特征工程概述2、数据预处理3、特征选择与提取4、建模与预测 1、特征工程概述 在上篇 泰坦尼克号幸存者数据分析 中&#xff0c;我们对泰坦尼克号的幸存者做了数据分析&#xff0c;通过性别、年龄、船舱等级等不同维度对幸存者进行了分类统计&#xff0…

Traefik的前世今生

Traefik 是一款现代的反向代理和负载均衡器&#xff0c;它的设计专门针对微服务架构和容器技术&#xff0c;如 Docker &#x1f433; 和 Kubernetes &#x1f3af;。自从其首次发布以来&#xff0c;Traefik 已经迅速成为云原生生态系统中不可或缺的一部分。在这篇文章中&#x…

上位机图像处理和嵌入式模块部署(qmacvisual缺失的颜色检测)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在图像处理当中&#xff0c;对颜色的处理是非常重要的。当然&#xff0c;这要建立在拍摄图片是彩色图片的基础之上。工业上面&#xff0c;虽然是黑…