1、html代码
<input type="text" name="ProjectNumber" id="ProjectNumber" />
<div class="contain__border__search" id="ProjectNumberSearch">
</div>
2、css样式
.contain__border__search {
display: none;
position: relative;
z-index: 9;
max-height: 200px;
overflow: auto;
border: 1px solid #ccc;
background: #fff;
width: 60%;
margin-left: 35%;
margin-top: -1px;
border-top: none;
box-shadow: 0 0 1px #ccc;
}
.contain__border__search p {
font-size: 14px;
height: 20px;
line-height: 20px;
}
.contain__border__search p:hover {
background: rgba(245, 239, 242, 1);
}
3、js实现
// 项目编号加keyup事件
$("#ProjectNumber").keyup(function () {
$("#ProjectNumberSearch").html(""); // 初始搜索框为空
var code = $("#ProjectNumber").val(); // 获取输入框中的值
if (code == "") { // 如果为空,隐藏搜索框
$("#ProjectNumberSearch").css("display", "none");
return;
} else {
for (var i = 0; i < systemCode.length; i++) { // systemCode为待匹配的所有值
for (var j = 0; j < systemCode[i].length; j++) {
var pat = new RegExp(code, "i");
if (pat.test(systemCode[i][j])) { // 如果匹配到,显示搜索框和内容
$("#ProjectNumberSearch").css("display", "block");
$("#ProjectNumberSearch").append("<p onclick='writeSystemCode(this)' ontouchstart='codeStart(this)' ontouchend()='codeEnd(this)' >" + systemCode[i][j] + "</p>");
}
}
}
}
if ($("#ProjectNumberSearch").html() == "") { // 如果搜索框为空,隐藏
$("#ProjectNumberSearch").css("display", "none");
}
});
// 当点击的时候,将内容写入表单,隐藏框
function writeSystemCode(p)
{
$("#ProjectNumber").val(p.innerHTML);
$("#ProjectNumberSearch").css("display", "none");
$("#ProjectNumberSearch").html("");
}
// 开始触碰事件
function codeStart(p)
{
$(p).css("background", "rgba(245, 239, 242, 1)");
}
// 触碰结束事件
function codeEnd(p) {
$(p).css("background", "#fff");
}