layui select配合input实现动态模糊搜索
功能需求: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实现动态模糊搜索的更多相关文章
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- jQuery形式可以计算,它包含了无线电的变化价格,select价格变化,删除行动态计算加盟
jQuery能够计算的表单,包含单选改变价格,select改变价格,动态加入删除行计算 各种表单情况的计算 演示 JavaScript Code <script type="text/ ...
- vue2.0结合Element实现select动态控制input禁用
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
- jQuery Validate input是动态变化的
表单验证 $("#dataList").append("<div id='data"+dataNum+"' style='padding-top ...
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
随机推荐
- Swing学习1——总体概述
以下来自于JDK1.6 一.Swing学习我划分为两个方面: 一方面Swing的界面设计部分,包括相关组件类的继承关系,组件的功能用途,布局管理: 1.首先继承关系上自上而下为 java.lang.O ...
- HAProxy原理和配置
HAProxy原理和配置 目录 1.HAProxy简介 2.haproxy安装和配置说明 proxies配置参数 bind配置 Balance配置 基于cookie的会话绑定 统计接口启用相关的参数 ...
- MAC IDEA mybatis 逆向工程 无结果文件
mac下路径是./src windows 路径是.\src 解决方法,将\纠正过来即可
- CornerStone使用跳坑总结(陆续更新)
Cornerstone是专门为Mac用户设计的Subversion(SVN)的控制,使版本控制更加透明.cornerstone根Xcode相比,能够更好的忽略文件,所以除了项目经理第一次初始化项目的时 ...
- 【证明】【一题多解】布尔不等式(union bound)的证明
布尔不等式(Boole's inequality)也叫(union bound),即并集的上界,描述的是至少一个事件发生的概率(P(⋃iAi)" role="presentatio ...
- Elasticsearch CURL命令
1.查看集群状态 curl '10.18.37.223:9200/_cat/health?v'绿色表示一切正常, 黄色表示所有的数据可用但是部分副本还没有分配,红色表示部分数据因为某些原因不可用 2. ...
- 转 深入理解net core中的依赖注入、Singleton、Scoped、Transient
出处:http://www.mamicode.com/info-detail-2200461.html 一.什么是依赖注入(Denpendency Injection) 这也是个老身常谈的问题,到底依 ...
- ietester下ie6.0停止工作问题的修复
工作时经常用到ie6.0来测试兼容性,不得不吐槽下ie6.0的过分老旧,页面编写完成后,最痛苦的莫过于在ie6.0下测试兼容性. 今天满怀基情的打算开始了一天的工作,却在刚要开始之初,被同事的iete ...
- linux 常用命令积累
工作中常用的linux记录一下,方便查询使用 1.ln 创建连接 ,就是window上的快捷方式 创建软连接 ln -s 源文件 目标文件名 经常访问的文件夹(项目文件夹),在~创建一个软连很方 ...
- Spark SQL / Catalyst 内部原理 与 RBO
原创文章,转载请务必将下面这段话置于文章开头处. 本文转发自技术世界,原文链接 http://www.jasongj.com/spark/rbo/ 本文所述内容均基于 2018年9月10日 Spark ...