【项目实战】select+input实现下拉框左右选择+模糊查询功能

最新推荐文章于 2024-06-26 15:10:10 发布
最新推荐文章于 2024-06-26 15:10:10 发布
阅读量2.7k 收藏 3
点赞数
分类专栏： -----项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytm15732625529/article/details/76595761
版权
本文介绍了一个项目实战案例，通过select和input元素组合，创建了具备下拉框左右选择和模糊查询功能。主要代码包括页面结构和JavaScript实现，实现了在右侧显示已分配的选项，左侧显示未分配的选项，并能进行模糊查询操作。文章强调了操作select的option、去重以及indexOf的正确使用等关键点。
摘要由CSDN通过智能技术生成

前言：

在项目中用遇到下拉框左右选择的需求，而easyui没有找到合适的插件，就想着用listbox来实现，但后来针对这个项目中没有想到合适的办法（ps：大家有了可以推荐哟），从网上看了一些demo，就想着用select来实现下拉框左右选择的效果，再结合input实现select中option项的模糊查询。

主要代码：

页面：

 @*选择窗体*@
    <div id="window" class="easyui-window" title="任务与指标信息" style="width:500px; height:395px" data-options="modal:true,collapsible:false,draggable:false,resizable:false,minimizable:false,maximizable:false,closable:false">
       <div style="display:inline;">
           <div style="display: inline;margin-left:33px"> 
               <input id="searchIndicatorName" class="easyui-textbox"  style="margin-bottom:5px; height: 32px; width: 156px"/>
           </div>
           <div style="display: inline;position:relative;">
               <a id="btnSearch" href="#" class="easyui-linkbutton" data-options="" style="margin-bottom:5px;margin-top:5px;margin-left:-5px">查询</a>
               <a id="btnSearchAll" href="#" class="easyui-linkbutton" data-options="" style="margin-bottom:5px;margin-top:5px;margin-left:3px">所有</a>
最低0.47元/天 解锁文章
一路向前！
关注
专栏目录
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 1390
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
Web项目实战 | 购物系统v2.0 | 开发记录（四）单个页面单个请求解决根据商品类型进行分页查询 | 使用省市区三级联动 | 使用JQuery 插件实现图片上传
希望每天都能进步一点点
02-04 537
Web项目实战 | 购物系统v2.0 | 开发记录（四）单个页面单个请求解决根据商品类型进行分页查询 | 使用省市区三级联动 | 使用JQuery 插件实现图片上传 |
input模拟select下拉框实现可下拉还可输入搜索（模糊搜索）
weixin_44882864的博客
11-07 6261
input输入框实现下拉并且可以模糊搜索 !【这是html部分】 <div class="dropdowns"> <input type="text" class="list-input list-search" readonly="readonly"> <ul class="dropdown-menu"> <input ty...
select结合input进行模糊搜索
Sudaofeng520的博客
06-26 1936
1：前端导入： &lt;script src="~/Content/js/select2/select2.min.js"&gt;&lt;/script&gt;&lt;link href="~/Content/js/select2/select2.min.css" rel="stylesheet" /&gt;//下拉绑定数据 $(function () {        //获取下拉框绑定的值   ..
为什么左右模糊不能使用索引
最新发布
qq_52497401的博客
06-26 253
当使用类似于`LIKE '%keyword%'`这样的模糊查询语句时，数据库引擎无法利用索引来加速查询的主要原因是因为在这种情况下，查询条件中的关键字keyword的位置不确定。为了避免左右模糊查询不能命中索引，可以采取以下几种方法：1. 尽量避免使用`LIKE '%keyword%'`这样的左右模糊查询，尽量缩小查询范围，减少查询条件中通配符的。2. 如果无法避免使用模糊查询，可以考虑使用`=`或`LIKE 'keyword%'`这样的左模糊查询，因为在这种情况下索引可以加速。
简单实用js——可输入可选择可模糊查询的select下拉
热门推荐
孙振光的博客
11-03 6万+
在网上有很多可输入及模糊查询的select下拉插件，功能也很强大，比如select、chosen等，做这个的方法也是有很多的，适用自己就好，下面是我自己的一个方法，希望适合大家 CSS代码 .second select { width: 11%; height: 106px; margin: 0px; outline: none; border:
select 下拉框搜索实现模糊查询 的两种实现方法（h5标签实现、js实现）
weixin_43078114的博客
12-12 1万+
方法一（h5 datalist标签实现） 效果 不输入时： 输入1： 输入2： code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META content="fason,阿信" name=Author> <t...
对下拉框进行模糊查询：一边输入一边模糊匹配
outstanding木槿
04-26 2854
可点击小叉号清除输入框中的数据，输入框尾部出现这个 ‘x’根据输入项进行筛选，是antd组件内部封装好的，直接拿来用。表示对内嵌内容进行搜索。：让下拉框有输入功能。
纯JS打造多选下拉框select+模糊查询功能
newbie的博客
07-28 1万+
多选下拉框功能，html本身就提供，multiple就可以了。但是这个multiple有个缺点，那就是高度和宽度是固定的，无法改变，很占用页面空间。 下面两张图，右边的是html原生的multiple，左边的是纯js完成的。 左图：缺点是麻烦，优点是节约页面空间，且附带模糊查询功能。 右图：缺点是浪费空间，优点是简单。     当然，现在很多前端框架都包含了左图的功能，简单易用。之...
mybatis+springmvc+miniui实战开发基本知识点
zhang_qian_qian123的专栏
08-08 3585
现对开发过程中学习到的知识点和问题进行整理，主要分四部分来说明，分别是mybatis的数据库查询语句、springMVC开发框架的配置、前端框架miniui主要使用的控件以及在开发过程中常见问题。 一、mybatis的数据库查询语句 通过列举SQL查询语句来说明mybatis一些基本的规则和写法，主要从文件的定义，书写结构和注意要点来进行说明。 现在的写法 ="accidentEmerge
模糊查询下拉框插件
06-17
It is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls. Think of it as Quicksilver squished into a select box. Download, view the examples, and enjoy. It takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.
jquery.inputer 完美替换select控件 带模糊搜索
05-31
1.jquery.inputer为替代select控件开发！ 2.本控件经过测试，兼容IE，火狐！ 3.本控件可以自由扩展！ 4.本控件为原创，代码有些凌乱，但功能齐全！ ---本控件代码为本人编写，完全处于分享拿出来的，有什么地方写的不好的，请大家口下留情！ 有什么问题可以联系QQ350023173交流！ 注明消息是CSDN：jquery.inputer 已经发现新的bug并修改了，有需要的可以联系我哈 QQ:350023173！ 注明消息jquery.inputer 兼容狐火，IE,苹果,遨游
input触发弹出层，实现select 效果
01-15
input 结合div实现 select效果
jQuery搜索框下拉菜单分类选择代码
06-10
一款比较常用的jQuery搜索框下拉菜单分类选择代码，对选择的栏目分类进行搜索。
Python后台开发--Django高级与项目实战
weixin_44888486的博客
06-29 825
1 Cookie 1.1 Cookie机制 在程序中，会话跟踪是很重要的事情。理论上，一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆。例如，用户A在超市购买的任何商品都应该放在A的购物车内，不论是用户A什么时间购买的，这都是属于同一个会话的，不能放入用户B或用户C的购物车内，这不属于同一个会话。 而Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这
动态下拉(类型)框关联Input(内容)框模糊查询+回显 [一看就懂]
萌小崔的博客
10-22 1020
题:下拉框挑选类型,内容框输该类型下的内容,进行模糊查询 先看效果 (方法较为复杂,方法二较为简便,这里方法一过程写的也较为详细,喜欢研究过程的可以看一下!!!! 目的是为了让大家更好理解!) 方法一 Html代码 类型:<select onchange="Change(this)" name="did"> <option value="0" >请选择</option> <option val..
输入框下拉列表 模糊搜索 功能实现
csdncvzhanshi的博客
07-29 442
涉及技术：vue、axios以及springboot 和mybatis mysql 效果如下： 1，贴上html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名查询</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.
input实现下拉模糊搜索
qq_41588568的博客
08-17 857
参考原博客地址：https://blog.csdn.net/qq_36337754/article/details/94160313 根据自己的需求，做了一些调整 html css js
vue3 + ant 实现下拉框选择器，该选择器可输入并进行模糊搜索
07-12
你可以使用 Vue 3 和 Ant Design Vue 来实现一个下拉框选择器，其中还可以输入并进行模糊搜索。这里是一个简单的示例代码： 首先，安装所需的依赖： ``` npm install vue@next ant-design-vue@next ``` 然后，在你的 Vue 组件中，引入需要的组件和样式： ```vue <template> <a-select v-model="selectedItem" mode="tags" placeholder="请输入关键字" @search="handleSearch" > <a-select-option v-for="option in filteredOptions" :key="option">{{ option }}</a-select-option> </a-select> </template> <script> import { ref, reactive, watch } from 'vue'; import { Select } from 'ant-design-vue'; export default { components: { ASelect: Select, ASelectOption: Select.Option, }, setup() { const options = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry']; const selectedItem = ref([]); const filteredOptions = reactive([]); watch(selectedItem, (newVal) => { console.log(newVal); }); const handleSearch = (value) => { filteredOptions.splice(0); // 清空数组 if (value) { const searchResult = options.filter((option) => option.toLowerCase().includes(value.toLowerCase()) ); filteredOptions.push(...searchResult); } }; return { selectedItem, filteredOptions, handleSearch, }; }, }; </script> <style> @import '~ant-design-vue/dist/antd.css'; </style> ``` 这个示例中，我们使用了 `a-select` 组件来实现下拉框选择器，并将 `mode` 属性设置为 "tags"，以支持多选。`placeholder` 属性设置为 "请输入关键字"，提供了一个搜索框用于输入关键字。 在 `@search` 事件中，我们通过过滤选项数组来实现模糊搜索功能，并将搜索结果更新到 `filteredOptions` 数组中。 最后，我们使用 `v-for` 指令来渲染 `a-select-option` 组件，将搜索结果展示为可选项。 `v-model` 指令用于绑定选中的项，可以通过 `selectedItem` 引用来获取或操作选中的项。 记得在组件中导入所需的组件和样式。这样，你就可以在你的 Vue 3 项目中使用这个下拉框选择器，并实现输入和模糊搜索了。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值