layui下拉列表select实现可输入查找的方法


Posted in Javascript onSeptember 28, 2019

如下图,这是一个layui的下拉列表select,随着下拉数据越来越多,我们找某个选项就比较吃力了。

layui下拉列表select实现可输入查找的方法

这是原下拉列表的代码(数据是从后台传来的):

layui下拉列表select实现可输入查找的方法

为了解决这个问题,我们可以将select改为可以筛选的格式,如下图。

layui下拉列表select实现可输入查找的方法

具体如何操作?其实很简单,在原select元素中加入 lay-search 即可。

layui下拉列表select实现可输入查找的方法

以上这篇layui下拉列表select实现可输入查找的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 #Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 #Javascript
使用layer模态框给新页面传值的方法
Sep 27 #Javascript
JavaScript实现随机五位数验证码
Sep 27 #Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 #Javascript
You might like
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
简单实现php上传文件功能
2017/09/21 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
Python实现端口复用实例代码
2014/07/03 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python3实现微型的web服务器
2019/09/03 Python
python 实现按对象传值
2019/12/26 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python ssh 执行shell命令的示例
2020/09/29 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
绝对经典成功的大学生推荐信
2013/11/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
MySQL约束超详解
2021/09/04 MySQL