功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能

html代码:

样式:

 <style>
     .select-search-input {
         position: absolute;
         z-index: 2;
         width: 80%;
     }
 </style>

select部分:

 <div class="layui-form-item layui-inline">
     <label class="layui-form-label" style="width:60px;">用户列表</label>
     <div class="layui-input-inline" style="width:150px;">
         <input type="text" name="selectInputUser" id="selectInputUser" class="layui-input select-search-input" value="" onkeyup="search();" autocomplete="off">
         <select name="user_id" id="selectUser" lay-filter="selectUser" autocomplete="off" class="layui-select" lay-search>
             <option value="">-不限-</option>
             <option value="1">张三</option>
             <option value="2">李四</option>
             <option value="3">王二麻子</option>
         </select>
     </div>
 </div>

其中input的几个style样式简单说一下:
position:absolute:在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号,select还可以点击。
autocomplete="off" 为了不自动填充input框,免得压盖select选项

JS代码:

 layui.use(['form', 'layedit','upload'], function () {
     var form = layui.form
     form.on('select(selectUser)', function (data) {   //选择并赋值给input框
         // value:data.value
         // 文本:data.elem[data.elem.selectedIndex].text;
         var txt = data.elem[data.elem.selectedIndex].text;
         $("#selectInputUser").val(txt);
         $("#selectUser").next().find("dl").css({ "display": "none" });
         form.render();
     });

     window.search = function () {
         var value = $("#selectInputUser").val();
         $("#selectUser").val(value);
         form.render();
         $("#selectUser").next().find("dl").css({ "display": "block" });
         var dl = $("#selectUser").next().find("dl").children();
         var j = -1;
         for (var i = 0; i < dl.length; i++) {
             if (dl[i].innerHTML.indexOf(value) <= -1) {
                 dl[i].style.display = "none";
                 j++;
             }
             if (j == dl.length-1) {
                 $("#selectUser").next().find("dl").css({ "display": "none" });
             }
         }
     }
 });

done!

layui select配合input实现动态模糊搜索的更多相关文章

  1. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  2. jQuery形式可以计算,它包含了无线电的变化价格,select价格变化,删除行动态计算加盟

    jQuery能够计算的表单,包含单选改变价格,select改变价格,动态加入删除行计算 各种表单情况的计算 演示 JavaScript Code <script type="text/ ...

  3. vue2.0结合Element实现select动态控制input禁用

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...

  4. layui 根据根据后台数据动态创建下拉框并同时默认选中

        第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...

  5. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  6. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  7. jQuery Validate input是动态变化的

    表单验证 $("#dataList").append("<div id='data"+dataNum+"' style='padding-top ...

  8. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  9. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

随机推荐

  1. Windws Server 2008 R2 WEB环境配置之MYSQL 5.6.22安装配置

    版本选择 因为MySql的版本越来越多,而作为中小网站者可能没有足够的经济去购买商业版本,所以一般选择免费版,而且功能也是足够使用的. 有钱任性就下载企业版,哈哈. 目前使用最多的版本是mysql i ...

  2. BZOJ1090: [SCOI2003]字符串折叠

    区间dp. 一种是分段dp[i][j]=min(dp[i][j],dp[i][k]+dp[k+1][j]); 一种是这一段可以缩写dp[i][j]=min(dp[i][j],dp[i][l]+2+ca ...

  3. 学习vulkan的几个有用的网址

    <ignore_js_op> 1)一个权威向导网站:https://vulkan-tutorial.com/2)Imagination图形组织官网http://imgtec.eetrend ...

  4. JS中反斜杠和单双引号的配合使用效果

    <div id="tag"></div> <div id="tag1"></div> <div id=&q ...

  5. .net DataTable 取值辅助类

    DataTableCommon类主要是帮助取值 方法列表: public static string GetCellString(DataTable dt,int row, int column) p ...

  6. [学习opencv]高斯、中值、均值、双边滤波

    http://www.cnblogs.com/tiandsp/archive/2013/04/20/3031862.html [学习opencv]高斯.中值.均值.双边滤波 四种经典滤波算法,在ope ...

  7. volatile关键字的特性及证明

    volatile是java虚拟机提供的轻量级的同步机制 JMM(Java内存模型)是围绕着并发编程中原子性.可见性.有序性这三个特征来建立的 原子性:一个操作或多个操作要么全部执行完成且执行过程不被中 ...

  8. java中Map.Entry的使用方法

    在Map类设计是,提供了一个嵌套接口(static修饰的接口):Entry.Entry将键值对的对应关系封装成了对象,即键值对对象,这样我们在遍历Map集合时,就可以从每一个键值对(Entry)对象中 ...

  9. Luogu3352 ZJOI2016 线段树 概率、区间DP

    传送门 考虑对于每一个位置\(i\),计算所有可能的结果出现的概率. 定义一个区间\([l,r]\)为对于\(x\)的极大区间,当且仅当\(\max \limits _{i=l}^r \{a_i\} ...

  10. Spring Boot引起的“堆外内存泄漏”排查及经验总结

    小结: 检索词:C++内存分配器.jvm内存模型.gdb.内存泄露 https://tech.meituan.com/2019/01/03/spring-boot-native-memory-leak ...