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…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
