编写自动匹配的下拉框(已解决IE8兼容)
如何制作一个带匹配功能的下拉框？
之前看见layui有相关组件，但是发现，如果输入的内容在下拉框中没有相应的匹配，就会清空当前值，搞得我很不满意。有些代码是从网上扒下来的，但是找不到原地址了，凑合看吧，希望有人看到提醒我一下。以下是测试解决方案：
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可搜索的下拉框</title>
<link href="https://www.layuicdn.com/layui/css/layui.css"
rel="stylesheet">
</head>
<body>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-container">
<div class="layui-row">
<div class="layui-form" style="width: 100px;">
<input type="text" id="Company" class="layui-input" style="position: absolute; z-index: 2; width: 70px;"
lay-verify="required" value="111" onkeyup="search()"
autocomplete="off">
<div class="layui-input-inline">
<select id="test" class="layui-select" lay-filter="test" lay-verify="required" autocomplete="off" lay-search>
<option value="layui">layui</option>
<option value="layer">layer</option>
<option value="jquery">jquery</option>
</select>
</div>
</div>
</div>
</div>
< script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
< script type="text/javascript" src="./layui/layui.js"></script>
< script type="text/javascript">
document.onmouseup = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
var _con = $('#test').next().find("div")
if(!_con.is(target) && _con.has(target).length === 0){
$("#test").next().find("dl").css({
"display" : "none"
});
}else{
$("#test").next().find("dl").css({
"display" : "block"
});
}
}
layui.use(['form'], function() {
$=layui.jquery;
layui.form.on('select(test)', function(data) {
$("#Company").val(data.value);
$("#test").next().find("dl").css({
"display" : "none"
});
layui.form.render();
});
window.search = function() {
var value = $("#Company").val();
$=layui.jquery;
$("#test").val(value);
layui.form.render();
$("#test").next().find("dl").css({
"display" : "block"
});
var dl = $("#test").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) {
$("#test").next().find("dl").css({
"display" : "none"
});
}
}
}
});
</script>
</body>
</html>
以上为全部代码
另外要注意的是，此处用到的layui与IE8不兼容，具体体现在当下拉框取值为空的时候，IE8会报错，因此需要修改layui的源码，一共需要修改三处：
一、
d=t(p[0].options[i]).html()
需要修改成
d=t(p[0].options[p[0].selectedIndex == -1 ? 0 : p[0].selectedIndex]).html()
二、
d=t(p[0].options[a]).html()
修改为
d=t(p[0].options[p[0].selectedIndex == -1 ? 0 : p[0].selectedIndex]).html()
三、
f=t(l.options[l.selectedIndex])
修改为
f=t(l.options[l.selectedIndex == -1 ? 0 : l.selectedIndex])
以上错误均为同一类错误,另外我用的是layui-v2.5.4(目前的最新版本)来测试的，至于jquery的引用自己看。以下我用四类浏览器进行测试，发现都可行，其中由于win10没有IE8，IE8的环境是在IE11的浏览器中设置了仿真。
IE8浏览器测试截图
IE11浏览器测试截图
火狐浏览器测试截图
谷歌浏览器测试截图
编写自动匹配的下拉框(已解决IE8兼容)的更多相关文章
- Qt编写自定义控件52-颜色下拉框
一.前言 这个控件写了很久了,元老级别的控件之一,开发之初主要是自己的好几个项目要用到,比如提供一个颜色下拉框设置对应的曲线或者时间颜色,视频监控项目中经常用到的OSD标签设置,这个控件的难度系数接近 ...
- jquery 匹配select下拉框与列表框
今天工作中用到 GrapyCity 的 wijmo ui 控件. 要给系统中所有类型的控件加统一样式 用法 $("input [type='text']").wijtext(); ...
- 简述Object(ActiveX)控件遮挡Dialog、select下拉框的解决办法
1.背景 最近在做项目的过程中,我们使用了Object控件,但是同时在上面写了一个select下拉框,因此每次点击下拉框的时候我们会发现,下拉框的部分内容被Object控件给遮挡了,调查研究后发现,我 ...
- easyui的combobox，自动搜索的下拉框
作者:多来哈米 如图,输入关键字,左匹配检索 HTML代码 <input class="easyui-combobox" name="userId" id ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- easyui combo自动高度（下拉框空白问题）
设置.combo-panel {max-height:200px;} 在用到easyui-combobox时,设置panelHeight:'auto'
- C#.NET MVC 枚举转dictionary自动装载生成下拉框
/// <summary> /// 枚举转SelectListItem /// </summary> public class Enum_Helper { /// < ...
- ThinkPHP中ajax绑定select下拉框无法显示
html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
随机推荐
- Yii 三表关联 角色表、角色权限连接表、权限表
Yii 三表关联 角色表.角色权限连接表.权限表 角色表 role----------------id 唯一序号name 角色名称---------------- 角色权限连接表 lp-------- ...
- 【记录】SpringBoot 2.X整合Log4j没有输出INFO、DEBUG等日志信息解决方案
由于批量更新的时候一直无法定位问题出处,就去服务器定位日志,奈何日志一直无法输出,为了能够更好的定位问题,痛定思痛后逐步排查最终解决问题.如有客官看到此处,请不要盲目对号入座,我的项目环境或许与你有区 ...
- HBase 系列（六）——HBase Java API 的基本使用
一.简述 截至到目前 (2019.04),HBase 有两个主要的版本,分别是 1.x 和 2.x ,两个版本的 Java API 有所不同,1.x 中某些方法在 2.x 中被标识为 @depreca ...
- lua_基本语法
学习lua,首先应该了解热更新. 热更新:可以在不重新下载客户端的情况下更新软件内容.在使用软件过程中,我们经常会遇到这种情况:升级软件,没错,这就使用的是热更新. C#不能直接热更新,原因为:C#脚 ...
- Hadoop HA Hbase启动报UnknownHostException: mycluster
Hadoop HA 搭建hbase启动时只有HMaster起来,HRegionServer没有起来 查看报错信息为: 2019-08-31 19:17:14,212 ERROR [main] regi ...
- 通过代码审计找出网站中的XSS漏洞实战(三)
一.背景 笔者此前录制了一套XSS的视频教程,在漏洞案例一节中讲解手工挖掘.工具挖掘.代码审计三部分内容,准备将内容用文章的形式再次写一此,前两篇已经写完,内容有一些关联性,其中手工XSS挖掘篇地址为 ...
- 「每日五分钟，玩转JVM」：对象从哪来
面向对象 众所周知,Java是一门面向对象的高级编程语言,那么现在问题来了,对象从哪来呢?有些人会说通过new关键字来创建一个对象,说的很好,本篇我们就来解密在new一个对象的过程中,JVM都给我们做 ...
- hud 3555 Bomb 数位dp
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Subm ...
- Convolution model by吴恩达
# GRADED FUNCTION: model def model(X_train, Y_train, X_test, Y_test, learning_rate = 0.009, num_epoc ...
- 用webpack构建一个常规项目,好处和坏处分析
最近项目改版,用webpack重新架构. 些许心得我会写几篇记录一下. 好处如下: 1.ES6语法用起来,babel-loader转义,各种新语法用起来. 2.import 语法写起来,webpack ...