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");}
