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 数值型和字符串型之间的转换
Jul 25 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
jquery实现拖动效果
Aug 10 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
javascript基础知识讲解
Jan 11 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
解决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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php生成微信红包数组的方法
2019/09/05 PHP
JavaScript使用cookie
2007/02/02 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
JS实现多选框的操作
2020/06/24 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python文件操作函数用法实例详解
2019/12/24 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
物流管理专业求职信
2014/05/29 职场文书
2015年采购员工作总结
2015/04/27 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书