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

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

这是原下拉列表的代码（数据是从后台传来的）：

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

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

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

赞 (0)

相关推荐

  • layui表单验证select下拉框实现验证的方法

    layui 的form表单里的select 一开始以为加上lay-verify="required"就可以验证不空了,可是反复试了几次都不能验证 代码如下: <div class="layui-form-item"> <label class="layui-form-label">所属工种:</label> <div class="layui-input-block"> <

  • 基于layui的下拉列表的数据回显方法

    静态网页+layui渲染 html代码 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <select id="t" name="quiz2"> <option value=&qu

  • Layui动态生成select下拉选择框不显示的解决方法

    给代码添加如下部分: layui.use('form', function(){ //此段代码必不可少 var form = layui.form; form.render(); }); 实现效果: HTML代码: <div class="layui-form-item"> <label class="layui-form-label">执行周期</label> <div class="layui-input-in

  • layui--select使用以及下拉框实现键盘选择的例子

    注意几点: 1.select下拉框一定要放到layui-form类下.这个layui-form不是必须放在form上,放在一个div也是可以的 2.要注意每次form render之后呢,要重新注册事件. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid

  • Layui 设置select下拉框自动选中某项的方法

    1. 需求场景分析 用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A.在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值. 2. Layui的select下拉框是怎么实现的 为了获得一个select标配的下拉框,我们需要在html中填写的内容如下: <div class="layui-form-item"> <label class="layui-form-label"><span

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

    如下图,这是一个layui的下拉列表select,随着下拉数据越来越多,我们找某个选项就比较吃力了. 这是原下拉列表的代码(数据是从后台传来的): 为了解决这个问题,我们可以将select改为可以筛选的格式,如下图. 具体如何操作?其实很简单,在原select元素中加入 lay-search 即可. 以上这篇layui下拉列表select实现可输入查找的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui layer select 选择被遮挡的解决方法

    在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到对应div的class 给overflow新的属性visible即可(默认值.内容不会被修剪,会呈现在元素框之外.)即可显示出下拉框 1.找到层1 的overflow 属性, 修改成为visible. 2. 如果有层2, 就把层2的也设置一下, 就完美解决了!!! 示例: 下面是一些示例: $(".layui-table-body").css('overflow','visible');

  • 解决使用layui对select append元素无效或者未及时更新的问题

    一.问题 本人在使用layui使用了select按钮,点击是js脚本会异步请求后台接口获取json数据,然后layui将json数据渲染到select上,然而获取接口数据没有问题,就是无法更新. 本人使用代码如下: <div class="main layui-clear"> <div class="fly-panel" pad20> <h2 class="page-title">发布帖子</h2>

  • 关于layui 下拉列表的change事件详解

    默认情况下,事件所监听的是全部的form模块元素,但如果你只想监听某一个元素,使用事件过滤器即可. 如:<select lay-filter="test"></select> 监听select 下拉选择框被选中时触发,回调函数返回一个object参数,携带两个成员: 注意:form.render('select');渲染一下 不然你的操作还是不生效 select不是选择器 表示渲染下拉列表 不写表示所有表单都渲染 语法如下 form.on('select(fil

  • js实现Select下拉框具有输入功能的方法

    本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <div style="

  • layui之select的option叠加问题的解决方法

    小编我在使用layui,在select的地方遇到了坑,select里的值居然无法清空,select里的option还有叠加问题,为了解决这个问题,也达到我的功能,我研究了下,让有同样需求的小伙伴不踩坑,特贴上我的源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layui-下拉框联动测试</title&g

  • 在layui中select更改后生效的方法

    在layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 form.render(); }); } 在每次操作部分表单元素后都进行一次调用 以上这篇在layui中select更改后生效的方法就是小编分

  • layui select 禁止点击的实现方法

    直接上代码啦 注意事项: 1. 必须写 layui.use([form]) 2. 先把属性设置为disabled 3. 再form.render()一下 以上这篇layui select 禁止点击的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui输入框中只允许输入整数的实现方法

    如下所示: <input class="layui-input" onkeyup="value=zhzs(this.value)" lay-verify="required|number" id="" name="" value="" maxlength="7"> //转化正整数 function zhzs(value){ value = value.re

随机推荐