直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>模糊查询搜索框</title>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.search {
left: 0;
position: relative;
}
/* 弹出框样式 */
#auto_div {
height: 140px;
display: none;
width: 873px;
border: 1px solid #cccccc;
background: #FFF;
margin: auto;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
/* 输入框样式 */
.ccjgd-seach {
/*border: 1px solid #cccccc;*/
width: 875px;
height: 40px;
line-height: 40px;
margin: auto;
position: relative
}
/* 放大镜图标样式 */
.ccjgd-seach .fdj {
position: absolute;
right: 15px;
top: 14px
}
</style>
</head>
<body>
<div class="search">
<div class="ccjgd-seach">
<input style="width: 869px;height: 34px" type="input" autocomplete="off" id="search_text" placeholder="请输入问题..."/>
<img src="fdj.png" class="fdj">
</div>
<div id="auto_div">
</div>
</div>
<script type="text/javascript">
//测试数据,可以改成你ajax请求数据库的值
var testTextList = ["今", "今晚", "今晚吃", "今晚吃什么","今晚吃火锅","今晚吃火锅喝奶茶"];
//智能补全
function AutoComplete(auto, search, list) {
var autoNode = $("#" + auto);//获取弹出框对象
var completeList = new Array(); //定义数组存弹出框的值
var n = 0;
var old_value = $("#" + search).val();
for (var i in list) {
if (list[i].indexOf(old_value) === 0) { //初始循环赋值到数组以便后续操作
completeList[n++] = list[i];
}
}
if (completeList.length == 0) { //数组为空不显示弹出框
autoNode.hide()
return;
}
autoNode.empty();//清空上次的记录
for (var i in completeList) {
var wordNode = completeList[i]; //弹出框里的每一条内容
var newDivNode = $("<div>").attr("id", i) //设置每个节点的id值
newDivNode.attr("style", "margin-left:0px;width:856px;font:14px/25px arial;height:25px;padding:0 8px;cursor:pointer;");//设置每条记录样式
newDivNode.html(wordNode).appendTo(autoNode);//追加到弹出框
// 鼠标移入高亮,移开不高亮
newDivNode.mouseover(function () {
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function () {
$(this).css("background-color", "white");
});
//鼠标点击文字上屏
newDivNode.click(function () {
autoNode.hide();
//取出高亮节点的文本内容
var comText = $(this).text();
//赋值给文本框
$("#" + search).val(comText);
});
//如果返回值有内容就显示出来
autoNode.show();
}
//点击文本框以外部分隐藏弹出框
document.onclick = function (e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != search) {
if ($("#" + auto).is(":visible")) {
$("#" + auto).css("display", "none");
}
}
}
}
$(function () {
//文本框焦点触发
$("#search_text").focus(function () {
AutoComplete("auto_div", "search_text", testTextList);
});
//文本框输入触发
$("#search_text").keyup(function () {
AutoComplete("auto_div", "search_text", testTextList);
});
//点击放大镜查询 可改成你要跳转的操作
$(".fdj").click(function () {
window.location.href = "https://www.baidu.com/s?wd=" + $("#search_text").val();
});
});
</script>
</body>
</html>
效果图:
点击文本框弹出所有记录:
输入文字触发:
选中后效果:
点击放大镜后跳转搜索: