layui实现选择框搜索(下拉搜索)功能

news2024/11/16 5:45:16

1.可以使用官方介绍的方法,适用于form表单内的下拉搜索,外层需要使用layui-form样式,select标签内添加lay-search=“”,此方法若外层不添加layui-form无法实现搜索功能,如下所示:在这里插入图片描述
2.下面是另一种形式的下拉选择,实现的效果图如下所示:
在这里插入图片描述

html代码如下所示:

<div class="layui-inline">
    <input id="inpProductNumber" name="inpProductNumber" placeholder="请选择.." type="text" lay-verify="required"
      autocomplete="off" class="layui-input text-item" value="" />
    <dl class="layui-anim layui-anim-upbit layui-hide">
      <dd lay-value="" class="layui-select-tips">请选择..</dd>
      <dd lay-value="GH100">GH100</dd>
      <dd lay-value="GH200">GH200</dd>
      <dd lay-value="GH300">GH300</dd>
    </dl>
  </div>

js代码如下所示:

$('.text-item').each(function () {
      var _this = $(this);
      var pdiv = _this.parent();

      var inpTitle = $('<div class=\"layui-select-title\"></div>');
      inpTitle.append(_this);
      inpTitle.append('<i class=\"layui-edge\"></i>');

      var inpDl = pdiv.find("dl");
      var inpText = $('<div class=\"layui-form-select  \"></div>')
      inpText.append(inpTitle);
      inpText.append(inpDl);
      inpDl.removeClass("layui-hide");

      inpDl.find("dd").click(function () {
        var ddthis = $(this);
        inpDl.find("dd").removeClass("layui-this");
        ddthis.addClass("layui-this");
        let val = ddthis.attr("lay-value");
        _this.val(val);
      });

      inpTitle.click(function () {
        $(".layui-form-selected").removeClass("layui-form-selected layui-form-selectup");
        inpText.addClass("layui-form-selected");
      });

      pdiv.html(inpText);

      _this.keyup(function () {
        inpDl.find("dd").removeClass("layui-this");
        inpDl.find("dd").each(function () {
          var dthis = $(this);
          let inpVal = _this.val().toUpperCase();
          let val = dthis.attr("lay-value").toUpperCase();
          if (val.indexOf(inpVal) != -1) {
            dthis.show();
          } else {
            dthis.hide();
          }
        });
      });

    });

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

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

相关文章

【GESP】2023年06月图形化一级 -- 小猫寻宝

文章目录 小猫寻宝1. 准备工作2. 功能实现3. 设计思路与实现&#xff08;1&#xff09;角色、舞台背景设置a. 角色设置b. 舞台背景设置 &#xff08;2&#xff09;脚本编写a. 角色&#xff1a;Catb. 角色&#xff1a;Crystal 4. 评分标准 小猫寻宝 1. 准备工作 &#xff08;1&…

kafka生产者api和数据操作

Kafka 生产者 发送流程 消息发送过程中涉及到两个线程——main线程和Sender线程 main线程 使用serializer&#xff08;并非java默认&#xff09;序列化数据&#xff0c;使用partitioner确认发送分区 在main线程中创建了一个双端队列RecordAccumulator&#xff0c;main线程将…

从0到1搭建spring cloud alibaba +springboot+nacos+dubbo微服务

版本关系&#xff1a; spring cloud alibaba各组件对应关系 创建父工程&#xff0c;pom.xml配置如下&#xff1a; 由以上版本对应关系&#xff1a; springboot版本&#xff1a;2.3.2.RELEASE spring cloud 版本选择&#xff1a;Hoxton.SR9 spring cloud alibaba版本选择&#…

【UE5 Cesium】02-Cesium for Unreal 添加在线数据集

上一篇&#xff1a; 【UE Cesium】01-在虚幻5中使用Cesium 步骤 1. 点击“connected to Cesium ion as xxx” 在弹出的网址中点击“Asset Depot”&#xff08;资产仓库&#xff09; 找到“Melbourne Photogrammetry”点击添加&#xff0c;添加到你的账户中。&#xff08;这里我…

关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会

前言 一直做的PC端的项目开发&#xff0c;想做一下手机端的开发。后端基本上是不用怎么变化&#xff0c;主要变化的是前端&#xff0c;前端网页运行的地方不同&#xff0c;一个运行在手机&#xff0c;一个运行在PC网页上。微信小程序的开发和Vue框架开发有诸多相似之处&#xf…

smardaten用户手册全新发布!5个超实用的使用技巧(建议收藏!)

社区版发布后&#xff0c;很多用户自行下载安装使用&#xff0c;我们收到了一些客官关于产品文档的吐槽和建议~~于是&#xff0c;我们重新编排了用户手册&#xff0c;来帮助大家更快、更好、更简单的上手无代码开发。今天睿睿来跟大家分享用户手册更新点&#xff0c;以及如何使…

常用网络接口自动化测试框架

目录 一、RESTful&#xff08;resource representational state transfer)类型接口测试 (一&#xff09;GUI界面测试工具&#xff1a;jmeter &#xff08;二&#xff09;JAVA语言脚本测试&#xff08;HttpClient) 二、WebService接口测试 &#xff08;一&#xff09;GUI界…

JAVA1

文章目录 计算机的硬件与软件DOS命令 计算机的硬件与软件 DOS命令

Flink-任务槽和并行度的关系

任务槽和并行度都跟程序的并行执行有关&#xff0c;但两者是完全不同的概念。简单来说任务槽是静态的概念&#xff0c;是指TaskManager具有的并发执行能力&#xff0c;可以通过参数taskmanager.numberOfTaskSlots进行配置&#xff1b;而并行度是动态概念&#xff0c;也就是Task…

菜鸟推出新一代资产管理操作系统“WIN”

在6月28日的2023全球智慧物流峰会上&#xff0c;菜鸟地网发布了新一代资产管理操作系统“WIN”。基于菜鸟地网多年积累的全球一体化物流基础设施网络和资产管理经验&#xff0c;依托物联网、大数据、人工智能等物流科技能力&#xff0c;“WIN”将为客户提供全链路的资产开发和运…

学习笔记20230629 -- 《分享在jsp分布式项目支援开发衍生功能时遇到和解决的问题》

1.jsp项目的页面跳转&#xff0c;需要后端的java技术做支撑&#xff0c;在java的接口文件中写跳转接口&#xff0c;使用ajax去请求这个跳转接口&#xff0c;将返回的数据&#xff08;html标签代码&#xff09;&#xff0c;放到当前页面或弹窗的"content"属性中 2…

联合体结合位域的作用

联合体结合位域的作用 例如 这段代码&#xff0c;巧妙运用了位域和联合体的特性&#xff0c;rx370x_cfg_data_t位域控制每个成员的大小 使总大小为32&#xff0c;cfg_u32和位域的大小相等&#xff0c;因为联合体共用一个空间的原因&#xff0c;此时cfg_u32中存放的内容就是位域…

如何实现WinApp的UI自动化测试?自动化工具如何选择人?

WinApp&#xff08;WindowsAPP&#xff09;是运行在Windows操作系统上的应用程序&#xff0c;通常会提供一个可视的界面&#xff0c;用于和用户交互。例如运行在Windows系统上的Microsoft Office、PyCharm、Visual Studio Code、Chrome&#xff0c;都属于WinApp。常见的WinApp&…

遇到客户服务问题,有哪些解决方法?

在当今竞争激烈的商业世界中&#xff0c;客户服务已成为任何成功企业不可或缺的一部分。然而&#xff0c;许多企业仍然难以提供高质量的客户服务。今天&#xff0c;我们简单聊一聊客户服务会遇到哪些问题&#xff1f;怎么解决&#xff1f; 1、客户服务人员培训不足 中小企业在…

12 MFC常用控件(二)

文章目录 滑动条控件初始化滚动条滑动滚动条获取消息 微调控件进度条控件时间控件 滑动条控件 初始化滚动条 CSliderCtrl* sliderCtrl (CSliderCtrl*)GetDlgItem(IDC_SLIDER1);sliderCtrl->SetRange(0,100);//设置范围sliderCtrl->SetPos(50);//当前显示在50//int nPos…

常见的锁策略CAS

目录 一、乐观锁&悲观锁 1.1、悲观锁 1.2、乐观锁 二、重量级锁&轻量级锁 2.1、轻量级锁 2.2、重量级锁 三、自旋锁&挂机等待锁 3.1、自旋锁 3.2、挂起等待锁 四、读写锁&普通互斥锁 4.1、读写锁 4.2、互斥锁 五、公平锁&非公平锁 六、可…

HBase(7):大量数据的计数统计

当HBase中数据量大时&#xff0c;可以使用HBase中提供的MapReduce程序来进行计数统计。语法如下&#xff1a; $HBASE_HOME/bin/hbase org.apache.hadoop.hbase.mapreduce.RowCounter 表名 1 启动YARN集群 启动yarn集群 start-yarn.sh 启动history server mr-jobhistory-da…

计算机视觉:多通道卷积操作

本文重点 前面我们学习了对灰度图的卷积操作(二维图像),本节课程我们学习RGB 彩色图像的卷积操作(三维立体)也就是说现在我们不仅想检测灰度图像的特征,也想检测 RGB 彩色图像的特征。 彩色图片的表示方法 彩色图片通常使用RGB(Red、Green、Blue)三个颜色通道来表示…

【裸机开发】UART 串口通信(一)—— 寄存器解析

目录 一、认识 UART 1、概念 2、帧格式 二、IO 复用为 UART 寄存器解析 1、原理图分析 2、寄存器解析 三、UART 相关寄存器解析 1、UART1_UCR1~4 2、UART1_USR1~2 3、波特率配置 4、UART1_URXD 5、UART1_UTXD 一、认识 UART 1、概念 UART 是一种通用的串行、异步…

web自动化测试如何实现(二)

目录 主流的自动化方案 web自动化测试环境如何搭建 1.安装selenium &#x1f381;更多干货 完整版文档下载方式&#xff1a; 主流的自动化方案 怎么进行选择&#xff1a; 如果有前端开发基础&#xff1a;cypress 如果只打算测试web端&#xff1a;playwright 除此之外&a…