模仿百度联想
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿百度联想相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 640px;
height: 36px;
margin: 100px auto;
position: relative;
}
.searchBox {
border: 1px solid #b6b6b6;
border-color: #7b7b7b #b6b6b6 #b6b6b6 #7b7b7b;
background: #fff;
display: inline-block;
vertical-align: top;
width: 539px;
height: 35px;
margin-right: 0;
border-right-width: 0;
border-color: #b8b8b8 transparent #ccc #b8b8b8;
overflow: hidden;
float: left;
}
.search {
width: 526px;
height: 22px;
font: 16px/18px arial;
line-height: 22px\9;
margin: 6px 0 0 7px;
padding: 0;
background: transparent;
border: 0;
outline: 0;
-webkit-appearance: none;
}
.btn {
display: inline-block;
width: 100px;
height: 36px;
color: white;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
outline: medium;
-webkit-appearance: none;
-webkit-border-radius: 0;
float: left;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.ul {
width: 540px;
height: auto;
position: absolute;
top: 37px;
left: 0;
display: none;
border: 1px solid #b6b6b6;
}
.ul li {
height: 22px;
line-height: 22px;
color: #000;
font: 14px arial;
line-height: 22px;
cursor: default;
text-indent: 9px;
}
.ul .high {
background: #ccc;
}
</style>
</head>
<body>
<div class="box">
<span class="searchBox" id="searchBox">
<input id="search" class="search" type="text">
</span>
<span id="btn" class="btn">百度一下</span>
<ul id="ul" class="ul">
<!-- <li>12154</li> -->
</ul>
</div>
<script src="jquery-1.11.2.min.js"></script>
<!-- <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> -->
<script>
var search = $("#search"),
ul = $("#ul"),
searchBox = $("#searchBox"),
val = "",
index = 999;
var data = {
bank: ["中国银行", "中国建设银行", "中国工商银行", "中国农业银行", "中国招商银行", "中国交通银行", "中国兴业银行", "中国邮政银行", "建设银行", "瑞士银行", "北京银行", "九江银行"]
};
search.focus();
inputColor();
/* 输入框border */
function inputColor() {
if (search.is(":focus")) {
searchBox.css({
"border-color": "#4791ff transparent #4791ff #4791ff"
});
};
search.on("blur", function() {
searchBox.css({
"border-color": "#7b7b7b #b6b6b6 #b6b6b6 #7b7b7b"
});
});
};
/* 列表border */
function ulColur() {
if (ul.is(":visible")) {
searchBox.css({
"border-color": "#4791ff transparent transparent #4791ff"
});
} else {
searchBox.css({
"border-color": "#4791ff transparent #4791ff #4791ff"
});
}
}
rendList();
/* 渲染列表 */
function rendList() {
search.on("input focus", function() {
var that = $(this),
html = "";
val = that.val();
ul.empty().show();
if (val == "") {
ul.hide();
}
ulColur();
$.each(data.bank, function(i, v) {
if (val == v.substr(0, val.length)) {
html = ‘<li>‘ + val + ‘<b>‘ + v.substr(val.length) + ‘</b></li>‘
$(html).appendTo(ul);
}
})
});
};
mouseMove();
/* 鼠标滑过列表 */
function mouseMove() {
ul.on("mouseover", "li", function() {
index = $(this).index();
$(this).addClass("high").siblings().removeClass();
}).on("click", "li", function() {
search.val($(this).text());
ul.hide();
}).on("mouseleave", function() {
index = 999;
$(this).find("li").removeClass();
})
};
clickDoc();
/* 点击其他区域关闭列表 */
function clickDoc() {
$(document).on("click", function(e) {
if (e.target.id == "searchBox" || e.target.id == "search") {
return false;
} else {
ul.hide();
}
})
}
keycode();
/* 上下键 */
function keycode() {
$(document).keydown(function(event) {
event = (event || window.event);
var max = ul.find("li").length - 1;
if (index >= max || index < 1) {
search.val(val);
ul.find("li").removeClass("high");
}
if (event.keyCode == 38) { //上
if (index < 1) {
index = max + 2;
}
ul.find("li").eq(index).addClass("high").siblings().removeClass("high");
search.val(ul.find("li").eq(index).text() || val);
index--;
return false;
} else if (event.keyCode == 40) { //下
if (index > max) {
search.val(val);
index = -1;
}
index++;
ul.find("li").eq(index).addClass("high").siblings().removeClass("high");
search.val(ul.find("li").eq(index).text() || val);
};
});
}
</script>
</body>
</html>
以上是关于模仿百度联想的主要内容，如果未能解决你的问题，请参考以下文章