layui 远程搜索下拉选择组件(多选)
模板使用(lay-module/searchSelect),依赖于 jquery、layui.dist 中的 dropdown 模块实现(所以data 格式请参照 layui文档)
<link rel="stylesheet" href="layui-v2.5.6/dist/css/layui.css" />
<link rel="stylesheet" href="lay-module/searchSelect/index.css" /><form id="app-form" class="layui-form layuimini-form"><div class="layui-form-item"><label class="layui-form-label">测试</label><div class="layui-input-block search-select-component"><!-- data-init以title字段作为显示 --><input name="tags" data-init='[{"id":1,"title":"123"}]' placeholder="Search..." class="layui-input search-select-input" /></div></div><div class="layui-form-item"><button type="submit" class="layui-btn" lay-submit lay-filter="demo-submit">确认</button><button type="reset" class="layui-btn">重置</button></div>
</form><script src="jquery.min.js"></script>
<script src="layui-v2.5.6/dist/layui.js"></script>
<script src="lay-module/searchSelect/index.js"></script>
<script>
layui.use(['jquery','form'], function () {const $ = layui.jquery;const form = layui.form;// 搜索下拉选择组件处理方法(默认拾取元素 elem: '.search-select-input')layui.searchSelect.render({onSearch: function (search) {console.log('onSearch', search);$.ajax({url: '/api/gelist',type: 'GET',data: {key: search.name,val: search.value,},dataType: 'json',success: function (res) {if (res.code == 1) {// res.data 中的 "title字段" 作为显示名称search.update(res.data);} else {layer.msg(res.msg, { icon: 2 });}},error: function () {layer.msg('network error', { icon: 2 });},});},});// 表单提交处理form.on('submit(demo-submit)', function(data){// 使用 layui.searchSelect.getValue 获取所有 searchSelect 值,传入 name 可以只取对应的value// 对应的value也会设置到对应的 .search-select-input 的 data-val 中const dd = layui.searchSelect.getValue();console.log(data, dd)});
});
</script>
searchSelect 模块实现(lay-module/searchSelect 目录中添加以下 index.js、index.css 文件)
1、index.css
.search-select-component .tags.select-list {display: flex;flex-direction: row;flex-wrap: wrap;gap: 10px;margin-top: 10px;margin-bottom: 20px;border: none;
}.search-select-component .tags.select-list:empty {margin-top: 0;margin-bottom: 0;
}.search-select-component .select-list-item {position: relative;padding-right: 20px;padding-top: 2px;
}.search-select-component .select-list-item .name {font-size: 14px;
}.search-select-component .select-list-item .del {position: absolute;top: 0;right: 0;font-size: 30px;font-weight: normal;line-height: 20px;float: none;width: 18px;padding: 0;cursor: pointer;text-align: center;opacity: 1;color: #ea0000;border: 0 none;background: transparent none repeat scroll 0 0;text-shadow: none;
}.search-select-component .layui-layer-msg {top: 40% !important;
}
2、index.js 文件
/** @Author: mojon* @Date: 2025-02-19 11:40:42* @Last Modified by: hi916* @Last Modified time: 2025-02-19 15:52:33* @Last Modified description: 搜索下拉选择组件(多选)*/
layui.define(['jquery', 'dropdown'], function (exports) {'use strict';const $ = layui.jquery;const dropdown = layui.dropdown;// 绑定值let values = {};// 删除itemfunction delItem(event) {const name = $(event.target).data('name');const value = $(event.target).data('value');console.log('删除item', name, value);if (values[name]) {values[name] = values[name].filter((item) => JSON.stringify(item) != JSON.stringify(value));$(event.target).parent().remove();$(event.target).data('val', values[name]);}}// 添加itemfunction addItem(el, value) {const name = $(el).attr('name');values[name].push(value);$(el).data('val', values[name]);console.log('添加item', name, values[name]);// item容器const div = document.createElement('div');div.classList.add('select-list-item');// title显示 (以title字段作为显示)const span = document.createElement('span');span.classList.add('name');span.textContent = value.title;// del按钮const btn = document.createElement('button');btn.classList.add('del');btn.textContent = 'x';btn.setAttribute('type', 'button');btn.setAttribute('data-name', name);btn.setAttribute('data-value', JSON.stringify(value));// 监听删除事件btn.addEventListener('click', delItem);div.appendChild(span);div.appendChild(btn);$(el).siblings('.tags.select-list').append(div);// $(el).siblings('.tags.select-list').append(`// <div class="select-list-item">// <span class="name">${data.title}</span>// <button type="button" class="del">×</button>// </div>// `);}// 监听选择function onSelect(el) {// 插入选择存放位置$(el).after('<div class="tags select-list"></div>');// 获取配置const name = $(el).attr('name');const width = $(el).width();const dropdown = layui.dropdown;const dropdownHeight = 300;dropdown.render({elem: el,id: name,position: 'absolute', // 设置位置为相对data: [],style: `max-height: ${dropdownHeight}px;width: ${width}px;overflow-y: auto;overflow-x: hidden;`,click: function (obj) {if (values[name]) {const isInclude = values[name].find((item) => JSON.stringify(item) == JSON.stringify(obj));// 没有重复选择if (!isInclude) addItem(el, obj);}},});}// 更新下拉选择列表function updateDropdown(name, data) {dropdown.reload(name, { data, show: true });}// 监听执行搜索function onSearch(el, callback = () => {}) {let timer = null;$(el).on('input', function (e) {const val = $(this).val();const data = $(this).data();const name = $(el).attr('name');clearTimeout(timer);timer = setTimeout(() => {if (val) {console.log('搜索onSearch', val);callback({...data,name: name,value: val,update: (data) => updateDropdown(name, data),});}}, 500);});}// 初始化(处理初始状态显示)function init(el) {const name = $(el).attr('name');const initValues = $(el).data('init');if (initValues) {initValues.forEach((value) => addItem(el, value));}console.log('初始化init', name, values);}// 获取值function getValue(name) {if (name) {return values[name];} else {return values;}}// 加载配置function render(options) {// 配置const opt = {elem: '.search-select-input',onSearch: () => {},...options,};// 遍历所有 searchSelect$(opt.elem).each((index, el) => {const name = $(el).attr('name');if (name) {// 生成预处理值values[name] = [];// 监听选择onSelect(el);// 监听搜索onSearch(el, opt.onSearch);// 初始化处理init(el);}});}// 组件初始化function Component() {return {render: render,getValue: getValue,};}exports('searchSelect', new Component());
});相关文章:
layui 远程搜索下拉选择组件(多选)
模板使用(lay-module/searchSelect),依赖于 jquery、layui.dist 中的 dropdown 模块实现(所以data 格式请参照 layui文档) <link rel"stylesheet" href"layui-v2.5.6/dist/css/layui.css" /&g…...
嵌入式学习(18)---Linux文件编程中的进程
一、进程的概念 进程:(用来描述 程序动态执行的过程,方便操作系统管理的) 进行中的程序 程序的一次执行过程 (内存 CPU) 程序的实例 程序 ----加载到内存----> 进程 应用场景: 实现并发 同一时刻 同时发生 并行 …...
一.AI大模型开发-初识机器学习
机器学习基本概念 前言 本文主要介绍了深度学习基础,包括机器学习、深度学习的概念,机器学习的两种典型任务分类任务和回归任务,机器学习中的基础名词解释以及模型训练的基本流程等。 一.认识机器学习 1.人工智能和机器学习 人工智能&am…...
RoCE和 TCP的区别
RoCE(RDMA over Converged Ethernet)和 TCP(Transmission Control Protocol)都是用于数据传输的协议,但它们在多个方面存在显著区别,以下为你详细介绍: 设计目标 RoCE:主要设计目标…...
勒索病毒攻击:如何应对和恢复
近年来,勒索病毒(Ransomware)已经成为全球信息安全领域最具破坏力的威胁之一。无论是个人用户,还是大中型企业,甚至政府机构,勒索病毒的攻击频率和破坏性日益增加。2020年及2021年,勒索病毒攻击不仅数量激增,且其攻击手法、目标和传播方式也变得更加复杂、精密和具有针…...
解决MySQL错误:You can‘t specify target table ‘xxx‘ for update in FROM clause
目录 错误复现场景原因分析解决方案方法1:使用派生表(推荐)方法2:改用JOIN操作方法3:使用临时表 总结 在编写MySQL的UPDATE或DELETE语句时,如果子查询中直接引用了要操作的目标表,可能会遇到一个…...
在Linux上安装和使用Docker
在Linux上安装和使用Docker:一步步指南 Docker是一种流行的容器化平台,它可以帮助开发者轻松构建、部署和运行应用程序。在本文中,我们将介绍如何在Linux系统上安装Docker,并提供一些常用的Docker命令和使用说明。 1. 安装Docke…...
【Git】四、标签管理
文章目录 Ⅰ. 理解标签Ⅱ. 创建标签① 轻量级标签② 含附注类标签 Ⅲ. 操作标签 Ⅰ. 理解标签 标签 tag ,可以简单的理解为是 对某次 commit 的一个标识,相当于起了一个别名。例如,在项目发布某个版本的时候,针对最后一次 com…...
elementui中aria-hidden报错
浏览器检查的原因,不影响功能,但会在控制台报红 解决办法: 在对应元素设置display:none .el-radio__original {display: none !important;}...
DeepSeek 助力 Vue 开发:打造丝滑的表单验证(Form Validation)
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…...
【MySQL】简单掌握数据类型与表操作,让数据库性能飞跃
个人主页:♡喜欢做梦 欢迎 👍点赞 ➕关注 ❤️收藏 💬评论 目录 🌳一、数据类型 🍃1.数值类型 🍂整型类型 🍂浮点型类型 🍂定点数类型 🍃2.字符串类型 3.&am…...
JUC并发编程——Java线程(一)
文章目录 1. 线程的创建1.1 方法1: 直接使用Thread1.2 方法2:使用Runnable配合Thread1.3 方法3:FutureTask配合Thread 2. 线程运行2.1 原理2.2 常见方法2.2.1 start与run2.2.2 sleep与yield2.2.3 join2.2.4 interrupt 3. 主线程和守护线程4. …...
Python入门笔记3
ros小车亚博官网例子延时性基本上跑完了,发现自己一些基础Python语法还不熟悉。 本节学习循环: while\for\break\continue 1. while 循环 while 循环会在条件表达式为真时,重复执行一段代码块,直到条件表达式变为假。 格式&am…...
【SQL教程|07】sql中条件查询where用法示例
SQL WHERE 条件查询教程 在SQL中,WHERE 条件用于在 SELECT 语句后过滤结果集,只返回符合条件的记录。它帮助我们从大量数据中提取所需的信息。以下是使用 WHERE 条件的逐步指南。 1. 基本语法 SELECT [字段] FROM [表] WHERE [条件];SELECT:…...
项目实战(13)-双频RFID语音播报阅读器
一. 产品简介: 1、项目背景是在实际应用中需要读取射频标签ID,但是市面上这种标签类型不统一;有的频段是125KHz,高频的是13.56MHz。所以需要一个读卡模块实现这两种卡的识别读取。 2、板子核心处理器是STM32F407,显示…...
基本控制环节的幅频和相频特性
基本控制环节的幅频和相频特性 在控制系统中,不同类型的控制环节具有各自独特的动态特性。为了研究这些环节对信号的影响,通常需要分析其频率响应特性,即幅频特性和相频特性。以下对几种常见的基本控制环节进行逐一分析。 1. 比例环节 比例…...
vue3 ref和reactive的区别
在 Vue 3 中,ref 和 reactive 是两种用于创建响应式数据的 API,但它们的使用场景和实现方式有一些区别。用大白话来说,它们的区别可以这样理解: 1. ref:适合处理简单数据 是什么:ref 是用来包装一个基本类…...
Maven 构建报告与文档生成
Maven 是一种强大的构建工具,它不仅可以帮助我们构建和管理项目,还提供了生成项目报告和文档的功能。通过 Maven 的插件,我们可以自动生成代码文档(如 Javadoc),执行测试并生成测试报告,以及其他…...
复制内容到软件内部,软件内部内容不刷新
在Windows 10系统中,遇到复制内容后需要点击任务栏才能刷新软件内容的问题,可能是由于软件自身刷新机制、系统资源管理或显卡驱动等原因导致。以下是逐步解决方案 1. 检查软件设置 开启自动刷新功能:某些软件(如文件管理器、IDE、…...
C# 实现完善 Excel 不规则合并单元格数据导入
目录 功能完善 Excel与DataSet的映射关系 运行环境 Excel DCOM 配置 设计实现 组件库引入 方法更新 返回值 参数设计 打开数据源并计算Sheets 拆分合并的单元格 创建DataTable 将单元格数据写入DataTable 删除虚拟列 总结 功能完善 在我的文章 《C#实现Excel…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
Django RBAC项目后端实战 - 03 DRF权限控制实现
项目背景 在上一篇文章中,我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统,为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...
当下AI智能硬件方案浅谈
背景: 现在大模型出来以后,打破了常规的机械式的对话,人机对话变得更聪明一点。 对话用到的技术主要是实时音视频,简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术,开发自己的大模型。商用方案多见为字节、百…...
【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统:网关转发与混合调度实战
🧠关键词:Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者:希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计:5300+ 字 🧭 背景与需求 在许多 IoT 项目中,单一通信方式往往难以兼顾近场数据采集…...
关于 ffmpeg设置摄像头报错“Could not set video options” 的解决方法
若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/148515355 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…...
【自然语言处理】大模型时代的数据标注(主动学习)
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构D 实验设计E 个人总结 A 论文出处 论文题目:FreeAL: Towards Human-Free Active Learning in the Era of Large Language Models发表情况:2023-EMNLP作者单位:浙江大…...
LeetCode第244题_最短单词距离II
LeetCode第244题:最短单词距离II 问题描述 设计一个类,接收一个单词数组 wordsDict,并实现一个方法,该方法能够计算两个不同单词在该数组中出现位置的最短距离。 你需要实现一个 WordDistance 类: WordDistance(String[] word…...
