如何制作一个带匹配功能的下拉框？

之前看见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兼容)的更多相关文章

  1. Qt编写自定义控件52-颜色下拉框

    一.前言 这个控件写了很久了,元老级别的控件之一,开发之初主要是自己的好几个项目要用到,比如提供一个颜色下拉框设置对应的曲线或者时间颜色,视频监控项目中经常用到的OSD标签设置,这个控件的难度系数接近 ...

  2. jquery 匹配select下拉框与列表框

    今天工作中用到 GrapyCity 的 wijmo ui 控件. 要给系统中所有类型的控件加统一样式 用法 $("input [type='text']").wijtext(); ...

  3. 简述Object(ActiveX)控件遮挡Dialog、select下拉框的解决办法

    1.背景 最近在做项目的过程中,我们使用了Object控件,但是同时在上面写了一个select下拉框,因此每次点击下拉框的时候我们会发现,下拉框的部分内容被Object控件给遮挡了,调查研究后发现,我 ...

  4. easyui的combobox，自动搜索的下拉框

    作者:多来哈米 如图,输入关键字,左匹配检索 HTML代码 <input class="easyui-combobox" name="userId" id ...

  5. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  6. easyui combo自动高度（下拉框空白问题）

    设置.combo-panel {max-height:200px;} 在用到easyui-combobox时,设置panelHeight:'auto'

  7. C#.NET MVC 枚举转dictionary自动装载生成下拉框

      /// <summary> /// 枚举转SelectListItem /// </summary> public class Enum_Helper { /// < ...

  8. ThinkPHP中ajax绑定select下拉框无法显示

    html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...

  9. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

随机推荐

  1. Appium+python自动化（三十三）- 环境（超详解）

    简介 在前边所有涉及启动app的时候有这样一行代码driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps),很多小 ...

  2. js作用域链和预编译

    js引擎运行分为两步,预解析 代码执行 (1)预解析: js引擎会拿js里面所有的var还有 function 提升到当前作用域的最前面 (2)代码执行:按照代码书写的顺序从上往下执行 预解析分为:变 ...

  3. Visual Studio 2015&2017 key

    Visual Studio 2015 key Key : HMGNV-WCYXV-X7G9W-YCX63-B98R2 Visual Studio Enterprise 2015 Key :HM6NR- ...

  4. 纯数据结构Java实现(4/11)(BST)

    个人感觉,BST(二叉查找树)应该是众多常见树的爸爸,而不是弟弟,尽管相比较而言,它比较简单. 二叉树基础 理论定义,代码定义,满,完全等定义 不同于线性结构,树结构用于存储的话,通常操作效率更高.就 ...

  5. 逆向破解之160个CrackMe —— 017

    CrackMe —— 017 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...

  6. app发布当天，用户无法登录

    原因:当用户登录时候有商城用户的触发器存在,它会让商城用户也更新成登录状态. 由于用户量大,导致数据库锁死. 最后解决案:删掉触发器,在app的接口登录程序里,追加商城用户更新成登录的操作. 他案1: ...

  7. 章节十六、4-TestNG高级功能--把测试方法分优先级、分组执行

    一. 把测试方法分优先级执行----->(priority=索引) 1.新建一个testng方法 package testclasses; import org.testng.annotatio ...

  8. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[1]：验证模型

    CKB 脚本编程简介[1]: 验证模型 本文作者:Xuejie 原文链接:Introduction to CKB Script Programming 1: Validation Model 本文译者 ...

  9. Fire Balls 04——砖塔的创建，动态上升以及旋转

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  10. [Python] 数据结构--实现顺序表、链表、栈和队列

    说明: 本文主要展示Python实现的几种常用数据结构:顺序表.链表.栈和队列. 附有实现代码. 来源主要参考网络文章. 一.顺序表 1.顺序表的结构 一个顺序表的完整信息包括两部分,一部分是表中元素 ...