本文作者:DurkBlue

layui如何实现select下拉搜索输入

DurkBlue2021-11-263221
layui如何实现select下拉搜索输入摘要: 在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素...
在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能)

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

layui如何实现select下拉搜索输入 第1张

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

layui如何实现select下拉搜索输入 第2张

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

layui如何实现select下拉搜索输入 第3张

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

layui如何实现select下拉搜索输入 第4张


此篇文章由DurkBlue博客申请发布,转载吧请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2021-11-26
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享