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

前引:

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

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

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

成果展示:

开发思路:

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

代码:

<selectid="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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

测试 moco-runner工具 mock数据

1.下载moco-runner-1.5.0-standalone.jar文件 2.编辑demo.json &#xff08;和jar包在同一级目录&#xff09; 建议不要指定 "headers为application/json&#xff0c; 如果制定了&#xff0c;那么restTemplate调用header为null,调用就会报错400 是一个数组&#xff0c;…

LeetCode700:二叉搜索树中的搜索

题目描述 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 代码 递归法 class Solution { public:TreeNode* searchBST(TreeN…

Visual Studio code无法正常执行Executing task: pnpm run docs:dev

最近尝试调试一个开源的项目&#xff0c;发现cmd可以正常启动&#xff0c;但是在vs中会报错&#xff0c;报错内容如下 Executing task: pnpm run docs:dev pnpm : 无法加载文件 E:\XXXX\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 http…

组合导航的结果分段跳变问题

1 现象 用上海代数律动公司的AlgoT1-3组合导航设备采集数据进行组合导航算法调试&#xff0c;AlgoT1-3机器输出的结果很好很平滑&#xff0c;AlgoT1-3是带GNSS/INS的组合导航设备&#xff0c;另外还有一款更贵一点的带视觉的组合导航AlgoT1&#xff0c;效果会更好一些&#xf…

【Tars-go】腾讯微服务框架学习使用03-- TarsUp协议

3 TarsUP协议 统一通信协议 TarsTup | TarsDocs (tarscloud.github.io) TarsDocs/base at master TarsCloud/TarsDocs (github.com) &#xff1a; 有关于tars的所有介绍 每一个rpc调用双方都约定一套数据序列化协议&#xff0c;gprc用的是protobuff&#xff0c;tarsgo是统一…

每日OJ题_01背包③_力扣494. 目标和(dp+滚动数组优化)

目录 力扣494. 目标和 问题解析 解析代码 滚动数组优化代码 力扣494. 目标和 494. 目标和 难度 中等 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; …

ThreadX:怎么确定一个线程应该开多少内存

ThreadX&#xff1a;如何确定线程的大小 在实时操作系统&#xff08;RTOS&#xff09;ThreadX中&#xff0c;线程的大小是一个重要的参数。这个参数决定了线程的堆栈大小&#xff0c;也就是线程可以使用的内存空间。那么&#xff0c;我们应该如何确定一个线程需要多大的字节呢…

C语言-----结构体详解

前面已经向大家介绍过一点结构体的知识了&#xff0c;这次我们再来深度了解一下结构体。结构体是能够方便表示一个物体具有多种属性的一种结构。物体的属性可以转换为结构体中的变量。 1.结构体类型的声明 1.1 结构体的声明 struct tag {member-list;//结构体成员变量 }vari…

MySQL进阶二

目录 1.使用环境 2.排序窗口函数 3.聚合窗口函数 1.使用环境 数据库&#xff1a;MySQL 8.0.30 客户端&#xff1a;Navicat 15.0.12 接续MySQL进阶一&#xff1a; MySQL进阶一-CSDN博客文章浏览阅读452次&#xff0c;点赞9次&#xff0c;收藏4次。MySQL进阶操作一。https…

P4631 [APIO2018] 选圆圈

题目传送门https://www.luogu.com.cn/problem/P4631 代码传送门https://www.luogu.com.cn/record/155489748 本弱鸡抄的~

【linux篇】ubuntu安装教程

有道是工欲善其事必先利其器&#xff0c;在学习linux前&#xff0c;先得搭建好环境才能事半功倍。 1.VMware虚拟机安装 打开浏览器&#xff0c;可直接在搜索栏中输入VMware。

Docker+Uwsgi+Nginx部署Django项目保姆式教程

之前&#xff0c;我和大家分享了在docker中使用uwsgi部署django项目的教程。这次&#xff0c;为大家带来的是使用DockerUwsgiNginx部署Django项目。废话不多说&#xff0c;我们开干。 步骤1&#xff1a;使用命令创建一个django项目 我这里python版本使用的是3.9.x 首先&#…

企业怎么做数据分析

数据分析在当今信息化时代扮演着至关重要的角色。能够准确地收集、分析和利用数据&#xff0c;对企业的决策和发展都具有重要意义。数聚将介绍企业如何合理地利用数据分析&#xff0c;如何协助企业在竞争激烈的市场中取得优势。 一、建立完善的数据收集系统 在进行数据分析之…

探究C++20协程(2)——取值、传值、销毁与序列生成器实现

序列生成器是一个非常经典的协程应用场景,尤其是在需要惰性生成数据或处理潜在无限的数据流时。 序列生成器概念&#xff1a;序列生成器允许程序按需生成序列中的下一个元素&#xff0c;而不是一次性计算整个序列。这种方式可以节省内存&#xff0c;并允许处理无限或未知长度的…

什么场景适合使用Traefik?

Traefik 作为一款现代的反向代理和负载均衡器&#xff0c;已经成为云原生环境中的热门选择。它提供的动态配置能力和强大的自动化功能使其在多种场景中非常有用。本文将详细探讨适合使用 Traefik 的几种关键场景&#xff0c;并解释为何在这些情况下它特别有用 &#x1f30d;&am…

【算法刷题day24】Leetcode:216. 组合总和 III、17. 电话号码的字母组合

文章目录 Leetcode 216. 组合总和 III解题思路代码总结 Leetcode 17. 电话号码的字母组合解题思路代码总结 草稿图网站 java的Deque Leetcode 216. 组合总和 III 题目&#xff1a;216. 组合总和 III 解析&#xff1a;代码随想录解析 解题思路 回溯三部曲&#xff1a;确定递归…

AcWing 794. 高精度除法——算法基础课题解

AcWing 794. 高精度除法 题目描述 给定两个非负整数&#xff08;不含前导 0&#xff09; A&#xff0c;B&#xff0c;请你计算 A/B 的商和余数。 输入格式 共两行&#xff0c;第一行包含整数 A&#xff0c;第二行包含整数 B。 输出格式 共两行&#xff0c;第一行输出所求…

研发岗-面临统信UOS系统配置总结

第一步 获取root权限 配置环境等都需要用到root权限&#xff0c;所以我们先获取到root权限&#xff0c;方便下面的操作 下载软件 在UOS应用商店下载的所需应用 版本都比较低 安装node 官网下载了【arm64】的包&#xff0c;解压到指定文件夹&#xff0c;设置链接&#xff0…

MyBatis 中当实体类中的属性名和表中的字段名不一样

第 1 种&#xff1a; 通过在查询的 sql 语句中定义字段名的别名&#xff0c;让字段名的别名和实体类的属性名一致。 <select id”selectorder” parametertype”int” resultetype”me.gacl.domain.order”>select order_id id, order_no orderno ,order_price price fo…

FiddlerScript过滤带有指定字符串的response

Fiddler进入Rules > Customize Rules…&#xff0c;定位到OnBeforeResponse函数进行修改&#xff1a; static function OnBeforeResponse(oSession: Session) {if (m_Hide304s && oSession.responseCode 304) {oSession["ui-hide"] "true";}…