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 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
vue如何判断dom的class
Apr 26 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
很实用的一个完整email发送程序
2006/10/09 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
JQuery 入门实例1
2009/06/25 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
用js制作淘宝放大镜效果
2020/10/28 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python中bisect的用法
2014/09/23 Python
Python中的super()方法使用简介
2015/08/14 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
员工培训心得体会
2013/12/30 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
2015年入党决心书
2015/02/05 职场文书
拖欠货款起诉状
2015/05/20 职场文书
自荐信范文
2019/05/20 职场文书
比较node.js和Deno
2021/04/27 Javascript
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python