<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jquery-1.9.1.min.js"></script>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
form {
width: 500px;
margin: 0 auto;
}
.items {
position: relative;
margin-bottom: 5px;
}
input[type='text'] {
width: 100%;
}
.div_items {
position: absolute;
height: auto;
width: 100%;
border: 1px solid #66afe9;
border-top: 0;
overflow: auto;
display: none;
background-color: #fff;
z-index: 9999;
}
.div_item {
width: 100%;
height: 20px;
margin-top: 1px;
font-size: 13px;
line-height: 20px;
cursor: pointer;
}
.div_item:hover {
background-color: #1C86EE;
color: #fff;
}
.p-rlt {
position: relative;
z-index: 1000;
zoom: 1;
}
</style>
</head>
<body>
<!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->
<form autocomplete="off">
<table style="width: 100%;position: relative;z-index: 1;">
<tr>
<td class="items">
<input type="text" class="inputSelect"/>
</td>
<td class="items">
<input type="text" class="inputSelect"/>
</td>
</tr>
<tr>
<td class="items">
<input type="text" class="inputSelect"/>
</td>
<td class="items">
<input type="text" class="inputSelect"/>
</td>
</tr>
<tr>
<td class="items">
<input type="text" class="inputSelect"/>
</td>
<td class="items">
<input type="text" class="inputSelect"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//隐藏列表框
$("body").click(function () {
$(".div_items").remove();
});
$(".inputSelect").click(function (e) {
e.stopPropagation();
$("table").find(".p-rlt").removeClass("p-rlt");
$(this).closest("td").addClass("p-rlt");
$(".div_items").remove();
var a = "12;13;23;24;35;36";
var aArry = new Array();
aArry = a.split(";");
var str = "";
for (var i = 0; i < aArry.length; i++) {
str == "" ? str = "<div class='div_item'>" + aArry[i] + "</div>" : str = str + "<div class='div_item'>" + aArry[i] + "</div>";
}
var divItems = $("<div class='div_items'></div>");
divItems.html(str);
divItems.appendTo($(this).closest(".items"));
$(".div_items").on('click', '.div_item', function () {
$(this).closest(".div_items").siblings().val($(this).text());
});
$(this).closest(".items").find(".div_items").css('display', 'block');
});
// 文本框输入
$(".inputSelect").keyup(function () {
var divItem = $(this).closest(".items").find(".div_item");
divItem.css('display', 'none');//如果填了,先将所有的选项隐藏
for (var i = 0; i < divItem.length; i++) {
if (divItem.eq(i).text().indexOf($(this).val()) >= 0) {
divItem.eq(i).css('display', 'block');
}
}
});
</script>
</body>
</html>
IE6、模糊搜索、z-index层级
最新推荐文章于 2022-07-11 07:35:00 发布