仿百度输入框智能提示的js代码

最新推荐文章于 2019-06-28 09:31:14 发布

kungfu_panda

最新推荐文章于 2019-06-28 09:31:14 发布

阅读量2k

点赞数 1

分类专栏：前端开发

前端开发专栏收录该内容

118 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.search
{
left: 0;
position: relative;
}
#auto_div
{
display: none;
width: 300px;
border: 1px #74c0f9 solid;
background: #FFF;
position: absolute;
top: 24px;
left: 0;
color: #323232;
}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

//测试用的数据
var test_list = ["小张", "小苏", "小杨", "老张", "老苏", "老杨", "老爷爷", "小妹妹", "老奶奶", "大鹏", "大明", "大鹏展翅", "你好", "hello", "hi"];
var old_value = "";
var highlightindex = -1; //高亮

//自动完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != old_value || old_value == "") {
var autoNode = $("#" + auto); //缓存对象（弹出框）
var carlist = new Array();
var n = 0;
old_value = $("#" + search).val();

for (i in mylist) {
if (mylist[i].indexOf(old_value) >= 0) {
carlist[n++] = mylist[i];
}
}
if (carlist.length == 0) {
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的记录
for (i in carlist) {
var wordNode = carlist[i]; //弹出框里的每一条内容

var newDivNode = $("<div>").attr("id", i); //设置每个节点的id值
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框

//鼠标移入高亮，移开不高亮
newDivNode.mouseover(function () {
if (highlightindex != -1) { //原来高亮的节点要取消高亮（是-1就不需要了）
autoNode.children("div").eq(highlightindex).css("background-color", "white");
}
//记录新的高亮节点索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function () {
$(this).css("background-color", "white");
});

//鼠标点击文字上屏
newDivNode.click(function () {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#" + search).val(comText);
})
if (carlist.length > 0) { //如果返回值有内容就显示出来
autoNode.show();
} else { //服务器端无内容返回那么隐藏弹出框
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也变成-1
highlightindex = -1;
}
}
}

//点击页面隐藏自动补全提示框
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 () {
old_value = $("#search_text").val();
$("#search_text").focus(function () {
if ($("#search_text").val() == "") {
AutoComplete("auto_div", "search_text", test_list);
}
});

$("#search_text").keyup(function () {
AutoComplete("auto_div", "search_text", test_list);
});
});
</script>
</head>
<body>
<div class="search">
<input type="text" id="search_text" />
<div id="auto_div">
</div>
</div>
</body>
</html>

kungfu_panda

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿百度输入框智能提示的js代码

.search{left: 0;position: relative;}#auto_div{display: none;width: 300px;border: 1px #74c0f9 solid;background: #FFF;position: absolute;top: 24px;left: 0;color: #323232;}
复制链接

扫一扫