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

 更新时间:2019年09月28日 09:13:15   作者:sunnyzyq  
今天小编就为大家分享一篇layui下拉列表select实现可输入查找的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

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

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

相关文章

  • JS实现的排列组合算法示例

    JS实现的排列组合算法示例

    这篇文章主要介绍了JS实现的排列组合算法,结合完整实例形式详细分析了排列组合算法的原理与javascript相关实现技巧,需要的朋友可以参考下
    2019-07-07
  • 使用layui实现树形结构的方法

    使用layui实现树形结构的方法

    今天小编就为大家分享一篇使用layui实现树形结构的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript截取、切割字符串的技巧

    JavaScript截取、切割字符串的技巧

    这篇文章主要介绍了JavaScript截取、切割字符串的技巧,文中给大家提到了substr 和 substring方法的区别,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2016-01-01
  • JS实现的RGB网页颜色在线取色器完整实例

    JS实现的RGB网页颜色在线取色器完整实例

    这篇文章主要介绍了JS实现的RGB网页颜色在线取色器,结合完整实例形式分析了基于JS运算及鼠标事件响应来操作页面元素实现取色器功能的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • JavaScript模板引擎实现原理实例详解

    JavaScript模板引擎实现原理实例详解

    这篇文章主要介绍了JavaScript模板引擎实现原理,结合实例形式详细分析了JavaScript模板引擎原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • 简单易用的倒计时js代码

    简单易用的倒计时js代码

    倒计时js代码想必大家都有用过,大同小异,本例为大家介绍的是简单易用的,需要的朋友可以参考下
    2014-08-08
  • JavaScript面向对象编程小游戏---贪吃蛇代码实例

    JavaScript面向对象编程小游戏---贪吃蛇代码实例

    这篇文章主要介绍了JavaScript贪吃蛇的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 用javascript操作xml

    用javascript操作xml

    用javascript操作xml...
    2006-11-11
  • JavaScript 作用域scope简单汇总

    JavaScript 作用域scope简单汇总

    这篇文章主要介绍了JavaScript 作用域scope简单汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 微信小程序实现底部弹出框

    微信小程序实现底部弹出框

    这篇文章主要为大家详细介绍了微信小程序实现底部弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论