jquery select search select快速查询定位插件

最新推荐文章于 2024-03-18 15:00:47 发布
最新推荐文章于 2024-03-18 15:00:47 发布
阅读量1.1w 收藏 3
点赞数
分类专栏： JQUERY技术 JS技术 文章标签： jquery search input 2010
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fkedwgwy/article/details/5489789
版权

jquery select search select快速查询定位插件

 

功能：对select快速查询定位

如图：1、2、3.

 

1

 

2

 

3

下载地址：

http://download.csdn.net/source/2244015

 

 

 

4.0.0.0版本：

4.0.0.0版本 增加input功能,即select 可以直接输入。同时修正了插件的显示效果。

http://code.google.com/p/omcode/downloads/detail?name=selectsearchv4.0.0.rar&can=2&q=#makechanges

3.2.0.0版本：

http://blog.csdn.net/fkedwgwy/archive/2010/06/13/5669690.aspx

2.1.0.0版本：

http://code.google.com/p/omcode/downloads/detail?name=selectsearchv2.1.0.rar&can=2&q=#makechanges

1.0.0.0版本：

http://blog.csdn.net/fkedwgwy/archive/2010/04/15/5489789.aspx

 

 

 

 

 

selectseachv1.0.0.rar selectseachv1.0.0.rar   jquery

http://code.google.com/p/omcode/downloads/detail?name=selectseachv1.0.0.rar&can=2&q=&sort=-filename#makechanges

 

selectsearchv3.2.0.rar    
selectsearchv3.1.1.rar  
selectsearchv2.1.0.rar

 

selectsearchv3.2.1.rar selectsearchv3.2.1.rar

http://code.google.com/p/omcode/downloads/detail?name=selectsearchv3.2.1.rar&can=2&q=

潇湘博客
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
前端——》Layui-下拉多选框拼音模糊匹配
叙传
07-01 2144
话不多说先看效果： 此效果是基于layui使用formselect4完成的，实现的几个必要条件是 1，开启select的属性 2，引入正确的js（这个着实找了大半天） 3，复制粘贴jquery代码 不足之处望提意见。 ------------------------分割线------------------------------- html部分 <label clas...
jquery.search.select:jQuery 选择元素过滤器
06-25
jquery.search.select jQuery 选择元素过滤器 $ ( '#select' ) . selectFilter ( '#searchBox' ) ;
JQuery插件searchSelect
fengguowusheng的博客
10-23 1475
1.简介 searchSelect是模拟select下拉列表组件的插件，支持通过键盘输入字符来过滤下拉列表选项。     2.更改内容 1）不再使用jQuery插件slimscroll。 2）修改jQuery的事件注册机制，使之支持低版本的jQuery。 3）隐藏原select组件。 4）使用jquery插件bgiframe使下拉列表在IE6中不被其它select组件穿越。 5...
【layui】扩展组件xm-select 下拉框带搜索功能 异步请求接口 ajax加载数据 ②
Khun_HWJ的博客
11-10 4076
根据地址来回填数据，如果地址栏有参数，那么下拉查询需要回填对应的数据 1、地址栏 admin/pages/storemanage/scangetbook/scangetbook.html?userid=19&nickname=Undefine 2、有地址参数为图一，无地址参数为图二，根据userid来回填值 需求：根据地址栏参数来判断下拉数据的回填，当点击查询时，如果下拉框有值就直接走第二步，如果下拉框没有值则提示【请先选择用户】 用到的是layui的第三方插件，xm-select xm-se
jQuery select下拉框单选和多选插件.zip
07-11
js代码 [removed][removed] [removed] ... $('a.search-choice-close[data-option-array-index="' $(this).data('option-array-index') '"]').trigger('click'); }); } }); [removed]
jQuery下拉查询筛选插件Combo Select
11-22
**jQuery下拉查询筛选插件Combo Select** 在Web开发中，为了提高用户体验，经常会使用到下拉选择框，特别是当选项列表很长时。jQuery库提供了一种强大的方式来增强原生HTML元素的功能，其中就包括了`Combo Select`...
jQuery Select下拉框关键字匹配查询选择代码.zip
09-22
插件可以扩展jQuery的功能，提供更简洁的API，例如`$('select').selectFilter('searchKey')`。 7. **响应式设计**：为了适应不同设备和屏幕尺寸，代码可能需要考虑响应式布局。通过检测视口宽度或使用媒体查询，...
jquery实现select带模糊搜索下拉选择框
11-10
然而，原生的 `select` 元素并不支持模糊搜索功能，所以我们需要借助 `jQuery` 和 CSS 来增强其功能。 1. **引入资源**： 在项目中，你需要引入 `jQuery` 库以及自定义的 CSS 和 JavaScript 文件。假设我们有以下...
jQuery-searchableSelect下拉框搜索插件
07-20
jQuery-searchableSelect下拉框带搜索美化插件
formSelects v4的一些操作
q908544703的博客
04-15 4800
formSelects v4的一些操作 1、下载与使用 使用方式: //1.下载formSelects-v4 //然后引入formSelects.css <link rel="stylesheet" href="formSelects-v4.css" /> //2.模块化使用 <script src="layui.js" type="text/javascript" charset="utf-8"></script> <script type="text/java
复选框ajax回显,layui实现下拉复选功能的例子(包括数据的回显与上传)
weixin_34430334的博客
08-06 569
一、layui下拉复选实现的背景：实现一个管理员拥有多个权限二、 具体实现：//依赖资源//页面显示角色：xm-select-search xm-select-skin="default" xm-select="sys_role" lay-filter="sys_role">//配置路径layui.config({base: "${pageContext.request.contextPat...
jquery 搜索select
征途人生&梦
09-05 394
$('.multiple-select-group .select-search .search_input').each(function() { $(this).keyup(function() { // 获取输入值 var currentValue = $(this).val() // 获取后面sele...
解决尚品汇search中的子组件（searchselector）点击品牌信息实现切换功能
qq_54087266的博客
04-24 172
当你点击了品牌，向服务器发请求获取相应的数据进行展示，这需要在父组件中发请求，为什么呢？因为父组件中的searchParams参数是带给服务器的（如上图），子组件把你点击的品牌信息给父组件传递信息---这时我们就想到用自定义事件 那么我们给他绑定一个单击事件tradeMarkHandler()当你点击的时候需要把该品牌给捞到，所以回调函数需要传参trademark 然后在品牌的事件处理函数在trademark中接收trademark 如何写自定义事件？ 首先回到父组件index.vue那里给...
前端jQuery和原生js 实现下拉框select模糊搜索功能总结
功能代码总结记录
05-11 3801
前端模糊查询，input框添加模糊搜索功能，原生select下拉列表添加搜索框实现模糊搜索，如：区划选择等场景
layui多选下拉使用笔记
热门推荐
guishifoxin的博客
07-18 1万+
  formSelects-v4:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html  201809:http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html#select_linkage bug、新增内容、修改内容...
xm-select远程搜索
最新发布
m0_48353529的博客
03-18 629
由于show之后会走到remoteMethod重新请求接口渲染页面，如果此时初始化有数据，那么每次show之后都只会展示初始化数据，无法完美的持续操作。若搜索栏有数据，会自动走到搜索接口，当返回数据为时，关闭下拉搜索框，接着再次打开，搜索栏为空，搜索结果也为空。如果要解决这个问题，可以加上show，展开下拉的回调，在里面通过再次更新xm-select从而使得重新刷新。解决办法：监听选中数据，选中之后替换初始化数据。4.1下拉树父节点没有选择框。
Layui搜索下拉框(xm-select)
hengyua的博客
10-19 1356
xm-select 文档链接地址https://maplemei.gitee.io/xm-select/#/senior/remoteSearch layui官网https://www.layui.com/demo/ 最近做的一个项目要用的一个动态下拉框搜索,最开始用的是formSelects 但是这个数据量大的话,渲染的速度慢代码冗余,不够流畅,xm-select是formselects的升级版,利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展,下面是我使用的一个下拉单选搜索. .
写一个jquery select单选搜索
09-18
### 回答1： 这取决于你想要的搜索结果的类型。你可以使用jQuery的selectors API来实现你的需求，例如：$("#selector option:selected") 来获取被选中的选项，或者可以使用jQuery UI的autocomplete插件来实现单选搜索功能。 ### 回答2： jQuery是一个流行的JavaScript库，用于简化JavaScript编程。通过使用jQuery，我们可以方便地编写可交互的网页。 在实现一个jQuery select单选搜索的功能时，我们可以按照以下步骤进行： 首先，我们需要定义一个HTML模板，包含一个select元素和一个input元素，用于接收用户的输入： ```html <select id="mySelect"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <input type="text" id="searchInput"> ``` 接下来，在JavaScript代码中，我们需要使用jQuery来实现搜索功能。可以在输入框输入时触发一个事件，比如`keyup`，然后根据输入的内容过滤select元素的选项。 ```javascript $(document).ready(function(){ $('#searchInput').on('keyup', function(){ var searchText = $(this).val().toLowerCase(); $('#mySelect option').each(function(){ var optionText = $(this).text().toLowerCase(); if (optionText.indexOf(searchText) > -1) { $(this).show(); } else { $(this).hide(); } }); }); }); ``` 以上代码会在文档加载完成后，绑定一个事件监听器到输入框，当输入框的内容发生变化时，会执行回调函数。 回调函数首先获取输入框的值，并将其转为小写字母。然后遍历select元素的每一个option，将其中的文本也转为小写字母。如果option的文本包含输入框的值，就将其显示出来，否则隐藏它。 这样，当用户在输入框中输入内容时，只有匹配的选项会显示出来，从而实现了一个简单的单选搜索功能。 ### 回答3： jQuery是一种流行的JavaScript库，用于简化DOM操作和处理事件等功能。要创建一个具有搜索功能的单选下拉框，可以使用jQuery的强大功能来实现。 首先，我们需要创建一个HTML结构来表示下拉框： ```html <div class="select-wrapper"> <input type="text" class="search-input" placeholder="搜索"> <select class="select-box"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> </div> ``` 接下来，使用jQuery为搜索输入框添加事件处理程序，当用户键入内容时动态过滤下拉选项： ```javascript $(function() { $('.search-input').on('input', function() { var inputValue = $(this).val().toLowerCase(); $('.select-box option').each(function() { var optionText = $(this).text().toLowerCase(); if (optionText.indexOf(inputValue) > -1) { $(this).show(); } else { $(this).hide(); } }); }); }); ``` 以上代码将捕获搜索输入框的`input`事件，并将输入值转换为小写，然后遍历每个选项并比较文本。如果选项文本包含输入值，则将其显示出来，否则隐藏该选项。 最后，我们需要添加一些CSS样式来增强用户体验，例如为选项框添加样式和搜索输入框的外观： ```css .select-wrapper { position: relative; display: inline-block; } .select-box { width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 3px; padding: 5px; } .search-input { width: 100%; height: 25px; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } ``` 通过以上代码，我们创建了一个具有搜索功能的单选下拉框，当用户键入内容时，选项会根据搜索结果进行动态过滤。这种实现方式简单而且实用，极大地提升了用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值