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 ...
随机推荐
- LINQ Expresstion Tree 表达式树
Expression trees represent code in a tree-like data structure, where each node is an expression, for ...
- java基础知识—类和对象
1.对象的特征---类的属性 每个对象的每个属性都有特定的值 对象的操作---类的方法 2.封装 对象同时具有属性和方法两项属性. 对象的属性和方法同时被封装在一起,共同体现事物的特性,二者相辅相成, ...
- MSP430中断的一个细节问题
关于中断标志: 从SPI发送一字节数据: void SPI_Set_SD_Byte(unsigned char txData) { UCB0TXBUF = txData; // 写入发送缓冲区 whi ...
- win8 tiles风格标签插件jquery.wordbox.js
http://www.html580.com/12180 jquery.wordbox.js轻松实现win8瓦片tiles式风格标签插件,只需要调用JS就能轻松实现瓦片菜单,自定义菜单背景颜色,支持响 ...
- shell截取指定字符串之间的内容
#!/bin/bash#截取字符串 #path=ss/usr/share/src/root/home/admin path=ss/usr/share/src/root/home/admin/src/a ...
- PHP博大精深,入门容易,精通难,怎么才能真正学好PHP
基础最重要 (1)熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作完整的网页,对元素属性达到熟悉程度 (2)理解动态语言的概念,运做机制,熟悉PHP语法 (3)学习如何将PHP与HT ...
- 小程序 movable-area 实现悬浮窗效果
最近做一个小程序 实现页面内悬浮窗的效果 给自己制定两个方案: 1.通过一个自定义的组件,通过触摸事件进行实现: 2.使用微信的movable移动组件实现: 第一种方案: 结果:实现了 悬浮窗和自动靠 ...
- Charles Map Local 中文显示乱码问题
最近在迁移客户端的业务,用React Native实现,在用本地数据测试Android的时候,遇到到中文乱码的问题.是因为编码问题. 一.首先看看文件编码是否是UTF-8,我的电脑是安装了Sublim ...
- aufac在mvc中多线程
注册的时候 将容器放到静态变量中 xxx.IocContainer = builder.Build(); var resolver = new AutofacDepende ...
- 上传文件代码报错,java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileItemFactory
2018-09-11 11:11:08.235 ERROR 14352 --- [nio-8080-exec-5] o.a.c.c.C.[.[.[/].[dispatcherServlet] : ...