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

news2024/11/26 5:34:04

前引:

        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>

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

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

相关文章

Redis搭建主从

Redis搭建主从: 1:拉取Redis镜像 docker pull redis2:创建主从对应的目录结构 3:对redis6379.log,redis6380.log,redis6381.log进行授权 chmod 777 redis6379.log chmod 777 redis6380.log chmod 777 redis6381.log4:修改主(master)的配置文件 5:创建主(master) redis_6379 …

基于Whisper语音识别的实时视频字幕生成 (一): 流式显示视频帧和音频帧

Whishow Whistream&#xff08;微流&#xff09;是基于Whisper语音识别的的在线字幕生成工具&#xff0c;支持rtsp/rtmp/mp4等视频流在线语音识别 1. whishow介绍 whishow&#xff08;微秀&#xff09;是python实现的在线音视频流播放器&#xff0c;支持rtsp/rtmp/mp4等流式输…

设计模式——命令模式14

命令模式&#xff1a;用构造函数将 命令实现者 传递给 调用者。 例如下面 小贩进货 设计模式&#xff0c;一定要敲代码理解 命令抽象 /***文具* */ public interface Stationery {void make(); }命令实现类 public class Pencil implements Stationery{private Producer pr…

LLamaSharp加载llama.cpp转化好的模型

新建.net8控制台项目 安装依赖包 LLamaSharp和LLamaSharp.Backend.Cpu 准备好转化好的模型 没有的话参考这篇文章https://blog.csdn.net/qq_36437991/article/details/137248622 编写代码 using LLama; using LLama.Common; using LLama.Native;namespace llamasharpstu…

视频这么长,有必要浪费时间看吗?#知识社群N3

在这个信息爆炸的时代&#xff0c;我们每天都会被大量的二手信息包围。不论是社交媒体、新闻还是网络论坛&#xff0c;处处充斥着别人的观点和总结。但这些二手信息真的能够代替我们去源头获取内容吗&#xff1f;信息的片面性、观点的偏颇乃至于事实的曲解&#xff0c;不断地在…

FRDM-MCXN947开发板之RGB灯

一、背景 RGB LED&#xff1a;通过红、绿、蓝三种颜色组合发光的LED&#xff0c;可以理解由三个不同发光属性的LED组成&#xff0c;这个是LCD平板显示原理的基础&#xff0c;一个LED相当于屏幕上面的一个像素 FRDM-MCXN947集成了一块RGB LED&#xff0c;它由三个GPIO口驱动&am…

【C++】详解类的--封装思想(让你丝滑的从C语言过度到C++!!)

目录 一、前言 二、【面向过程】 与 【面向对象】 三、结构体 与 类 &#x1f34e;C中结构体的变化 &#x1f349;C中结构体的具体使用 &#x1f350;结构体 --> 类 ✨类-----语法格式&#xff1a; ✨类的两种定义方式&#xff1a; 四、类的访问限定符及封装【⭐】 …

海外媒体发稿:4种旅游业媒体套餐助你宣发推广-华媒舍

在现代社会中&#xff0c;旅游业发展迅速&#xff0c;竞争也变得日益激烈。为了让自己的旅游产品或服务脱颖而出&#xff0c;宣传和推广变得至关重要。有着强大传播力的媒体平台成为了旅游行业的一项重要资源。为了更好地推广旅游业&#xff0c;提高其影响力&#xff0c;有许多…

如何做好软件平台的全生命周期管理?

一、为何需生命周期管理 做好软件平台的全生命周期管理至关重要&#xff0c;主要原因如下&#xff1a; 确保软件质量&#xff1a; 全生命周期管理涵盖了从需求分析、设计、开发、测试、部署、运行维护到废弃的全过程&#xff0c;通过有效的管理可以确保每个阶段的质量控制&…

Java集合(一)Map(1)

Map HashMap和HashTable区别 线程是否安全&#xff1a;HashMap线程不安全&#xff0c;HashTable线程安全。因为HashTable内部的方法都经过了synchronized关键字修饰。 HashMap线程不安全例子&#xff1a;如果两个线程都要往HashMap中插入数据&#xff0c;但是发生哈希冲突&…

响应式布局(其次)

响应式布局 一.响应式开发二.bootstrap前端开发框架1.原理2.优点3.版本问题4.使用&#xff08;1&#xff09;创建文件夹结构&#xff08;2&#xff09;创建html骨架结构&#xff08;3&#xff09;引入相关样式&#xff08;4&#xff09;书写内容 5.布局容器&#xff08;已经划分…

YOLOv8绝缘子边缘破损检测系统(可以从图片、视频和摄像头三种方式检测)

可检测图片和视频当中出现的绝缘子和绝缘子边缘是否出现破损&#xff0c;以及自动开启摄像头&#xff0c;进行绝缘子检测。基于最新的YOLO-v8训练的绝缘子检测模型和完整的python代码以及绝缘子的训练数据&#xff0c;下载后即可运行。&#xff08;效果视频&#xff1a;YOLOv8绝…

【IR-SDE】Image Restoration SDE项目演示运行app.py

背景&#xff1a; code:GitHub - Algolzw/image-restoration-sde: Image Restoration with Mean-Reverting Stochastic Differential Equations, ICML 2023. Winning solution of the NTIRE 2023 Image Shadow Removal Challenge. paper: Official PyTorch Implementations o…

Salient Object Detection 探索经历

概述 显著性目标检测也被称为显著性检测&#xff0c;旨在通过模拟人类视觉感知系统来检测自然场景图像中最显著的目标和区域。虽然&#xff0c;显著性目标检测听名字是一个检测任务&#xff0c;但是实际上是一个图像分割任务&#xff0c;即一个像素级分类任务&#xff0c;是一…

毅速ESU丨增材制造有助于传统制造企业打造新增长极

在科技浪潮的推动下&#xff0c;传统制造企业正面临着前所未有的挑战与机遇。产品的复杂程度不断提升&#xff0c;个性化需求层出不穷&#xff0c;越来越短的生产周期&#xff0c;不断升级的品质要求等&#xff0c;传统的生产模式在应对这些变化并不容易。而增材制造&#xff0…

[大模型]Yi-6B-Chat 接入 LangChain 搭建知识库助手

Yi-6B-Chat 接入 LangChain 搭建知识库助手 环境准备 在 autodl 平台中租赁一个 3090 等 24G 显存的显卡机器&#xff0c;如下图所示镜像选择 PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8 接下来打开刚刚租用服务器的 JupyterLab&#xff0c;并且打开其中的终端开始…

港科夜闻|叶玉如校长牵头举办大湾区国际科创峰会,与海内外教育领袖共话全球合作,教育与创新...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大校长叶玉如教授牵头举办大湾区国际科创峰会&#xff0c;与海内外教育领袖共话全球合作、教育与创新。粤港澳大湾区院士联盟主办的“第二届大湾区国际科创峰会”4月3日在香港科学园举行&#xff0c;汇聚了区内及海…

浅说深度优先搜索(上)——递归

好久没有讲算法了&#xff0c;今天我们就来谈谈“初学者”的第二个坑&#xff0c;深度优先搜索&#xff0c;其实也就是递归。 写在最前 相信很多人都和我一样刚开始的时候完全不知道怎么下手&#xff0c;甚至可以说是毫无头绪&#xff0c;那么我们来理一理递归到底要怎么写。…

C/C++ 入门(5)内存管理

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 欢迎指教&#xff01; 目录 一、内存分布 二、C中动态内存管理 new delete 三、C语言的动态内存管理 四、operator new 和operator delete函数 operator new operator delete 五、new和delete的…

STM32H743VIT6使用STM32CubeMX通过I2S驱动WM8978(4)

接前一篇文章&#xff1a;STM32H743VIT6使用STM32CubeMX通过I2S驱动WM8978&#xff08;3&#xff09; 本文参考以下文章及视频&#xff1a; STM32CbueIDE Audio播放音频 WM8978 I2S_stm32 cube配置i2s录音和播放-CSDN博客 STM32第二十二课&#xff08;I2S&#xff0c;HAL&am…