搜索联想不仅仅需要监听输入框,写入联想数据。还需要监听空白事件,即点击空白处隐藏;点击联想选项写入输入框;同时还要阻止联想盒子的点击冒泡。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form-control {
border-radius: 0;
box-shadow: none;
border-color: #d2d6de;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 170px;
height: 28px;
padding: 6px 12px;
font-size: 13px;
line-height: 1.42857143;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
.form-control:focus {
border-color: #4397fd;
box-shadow: none;
}
.recommend {
width: 194px;
margin-top: -10px;
background: #fafafa;
z-index: 10000;
position: absolute;;
border: 1px #ccc solid;
border-top: 0;
display: none;
}
.recommend span {
width: 182px;
padding: 4px 0px 4px 12px;
display: inline-block;
cursor: pointer;
}
.recommend span:hover {
color: #0051bb;
background: #f2f2f2;
}
</style>
<script crossorigin="anonymous" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div>
<input class="form-control" type="text" placeholder="请输入标准申请人" name="applicant_name">
<span class="btn btn-success btn-embossed">检索</span>
</div>
<div class=" recommend "></div>
<script>
//联想:
$("input[name='applicant_name']").keyup(function () {
this.value = this.value.replace(/\s+/g, '');
let _html = "";
res = ['111111', '222222'];
for (let i = 0; i < res.length; i++) {
_html += "<span onclick='up_text(this)'>" + res[i] + "</span>";
}
$(".recommend").show();
$(".recommend").html(_html);
// $.post('./guard/recommend.html', {applicant_name: this.value}, function (res) {
// let _html="";
// let len = res.data.length > 5 ? 5 : res.data.length;
// for (let i=0;i<len;i++){
// _html+="<span onclick='up_text(this)'>"+res.data[i]+"</span>";
// }
// $(".recommend").show();
// $(".recommend").html(_html);
//
//},"json");
});
//阻止冒泡到body
$(".recommend").click(function (e) {
e.stopPropagation();
});
//点击页面隐藏联想
$("body").click(function () {
$(".recommend").hide();
});
//点击文本写入input
function up_text(self) {
$("input[name='applicant_name']").val($(self).text());
$(".btn.btn-success").click();
}
</script>
</body>
</html>