功能需求: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. LINQ Expresstion Tree 表达式树

    Expression trees represent code in a tree-like data structure, where each node is an expression, for ...

  2. java基础知识—类和对象

    1.对象的特征---类的属性 每个对象的每个属性都有特定的值 对象的操作---类的方法 2.封装 对象同时具有属性和方法两项属性. 对象的属性和方法同时被封装在一起,共同体现事物的特性,二者相辅相成, ...

  3. MSP430中断的一个细节问题

    关于中断标志: 从SPI发送一字节数据: void SPI_Set_SD_Byte(unsigned char txData) { UCB0TXBUF = txData; // 写入发送缓冲区 whi ...

  4. win8 tiles风格标签插件jquery.wordbox.js

    http://www.html580.com/12180 jquery.wordbox.js轻松实现win8瓦片tiles式风格标签插件,只需要调用JS就能轻松实现瓦片菜单,自定义菜单背景颜色,支持响 ...

  5. shell截取指定字符串之间的内容

    #!/bin/bash#截取字符串 #path=ss/usr/share/src/root/home/admin path=ss/usr/share/src/root/home/admin/src/a ...

  6. PHP博大精深,入门容易,精通难,怎么才能真正学好PHP

    基础最重要  (1)熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作完整的网页,对元素属性达到熟悉程度  (2)理解动态语言的概念,运做机制,熟悉PHP语法  (3)学习如何将PHP与HT ...

  7. 小程序 movable-area 实现悬浮窗效果

    最近做一个小程序 实现页面内悬浮窗的效果 给自己制定两个方案: 1.通过一个自定义的组件,通过触摸事件进行实现: 2.使用微信的movable移动组件实现: 第一种方案: 结果:实现了 悬浮窗和自动靠 ...

  8. Charles Map Local 中文显示乱码问题

    最近在迁移客户端的业务,用React Native实现,在用本地数据测试Android的时候,遇到到中文乱码的问题.是因为编码问题. 一.首先看看文件编码是否是UTF-8,我的电脑是安装了Sublim ...

  9. aufac在mvc中多线程

    注册的时候 将容器放到静态变量中    xxx.IocContainer = builder.Build();            var resolver = new AutofacDepende ...

  10. 上传文件代码报错,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]    : ...