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

html代码:

样式:

  1. <style>
  2. .select-search-input {
  3. position: absolute;
  4. z-index: 2;
  5. width: 80%;
  6. }
  7. </style>

select部分:

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

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

JS代码:

  1. layui.use(['form', 'layedit','upload'], function () {
  2. var form = layui.form
  3. form.on('select(selectUser)', function (data) { //选择并赋值给input框
  4. // value:data.value
  5. // 文本:data.elem[data.elem.selectedIndex].text;
  6. var txt = data.elem[data.elem.selectedIndex].text;
  7. $("#selectInputUser").val(txt);
  8. $("#selectUser").next().find("dl").css({ "display": "none" });
  9. form.render();
  10. });
  11.  
  12. window.search = function () {
  13. var value = $("#selectInputUser").val();
  14. $("#selectUser").val(value);
  15. form.render();
  16. $("#selectUser").next().find("dl").css({ "display": "block" });
  17. var dl = $("#selectUser").next().find("dl").children();
  18. var j = -1;
  19. for (var i = 0; i < dl.length; i++) {
  20. if (dl[i].innerHTML.indexOf(value) <= -1) {
  21. dl[i].style.display = "none";
  22. j++;
  23. }
  24. if (j == dl.length-1) {
  25. $("#selectUser").next().find("dl").css({ "display": "none" });
  26. }
  27. }
  28. }
  29. });

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. Swing学习1——总体概述

    以下来自于JDK1.6 一.Swing学习我划分为两个方面: 一方面Swing的界面设计部分,包括相关组件类的继承关系,组件的功能用途,布局管理: 1.首先继承关系上自上而下为 java.lang.O ...

  2. HAProxy原理和配置

    HAProxy原理和配置 目录 1.HAProxy简介 2.haproxy安装和配置说明 proxies配置参数 bind配置 Balance配置 基于cookie的会话绑定 统计接口启用相关的参数 ...

  3. MAC IDEA mybatis 逆向工程 无结果文件

    mac下路径是./src windows 路径是.\src 解决方法,将\纠正过来即可

  4. CornerStone使用跳坑总结(陆续更新)

    Cornerstone是专门为Mac用户设计的Subversion(SVN)的控制,使版本控制更加透明.cornerstone根Xcode相比,能够更好的忽略文件,所以除了项目经理第一次初始化项目的时 ...

  5. 【证明】【一题多解】布尔不等式(union bound)的证明

    布尔不等式(Boole's inequality)也叫(union bound),即并集的上界,描述的是至少一个事件发生的概率(P(⋃iAi)" role="presentatio ...

  6. Elasticsearch CURL命令

    1.查看集群状态 curl '10.18.37.223:9200/_cat/health?v'绿色表示一切正常, 黄色表示所有的数据可用但是部分副本还没有分配,红色表示部分数据因为某些原因不可用 2. ...

  7. 转 深入理解net core中的依赖注入、Singleton、Scoped、Transient

    出处:http://www.mamicode.com/info-detail-2200461.html 一.什么是依赖注入(Denpendency Injection) 这也是个老身常谈的问题,到底依 ...

  8. ietester下ie6.0停止工作问题的修复

    工作时经常用到ie6.0来测试兼容性,不得不吐槽下ie6.0的过分老旧,页面编写完成后,最痛苦的莫过于在ie6.0下测试兼容性. 今天满怀基情的打算开始了一天的工作,却在刚要开始之初,被同事的iete ...

  9. linux 常用命令积累

    工作中常用的linux记录一下,方便查询使用 1.ln 创建连接 ,就是window上的快捷方式 创建软连接  ln -s 源文件 目标文件名   经常访问的文件夹(项目文件夹),在~创建一个软连很方 ...

  10. Spark SQL / Catalyst 内部原理 与 RBO

    原创文章,转载请务必将下面这段话置于文章开头处. 本文转发自技术世界,原文链接 http://www.jasongj.com/spark/rbo/ 本文所述内容均基于 2018年9月10日 Spark ...