JavaScript实现搜索框智能提示上下移动效果

2013-04-12 0人评论 727次浏览分类：Js/Jquery特效

最近公司网站首页搜索框改进，需要在智能提示列表上加上支持键盘上下键移动的效果。

搞了一晚上，下面呈上纯javascript代码，没有用到jquery等其他类库。

以下仅供自己收藏，贴上来希望能起到抛砖引玉的作用。

<!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">
ul,li{list-style-type:none;}
</style>
<script type="text/javascript" language="javascript">
var currentSelIndex = -1;
var oldSelIndex = -1;
function selectItem(keyword, event) {
if (keyword == "") {
document.getElementById("ulItems").style.display = "none";
return;
}
else {
var liLength = document.getElementById("ulItems").getElementsByTagName("li").length; //获取列表数量
if ((event.keyCode == 38 || event.keyCode == 40) && document.getElementById("ulItems").style.display != "none") {
if (liLength > 0) {
oldSelIndex = currentSelIndex;
//上移
if (event.keyCode == 38) {
if (currentSelIndex == -1) {
currentSelIndex = liLength - 1;
}
else {
currentSelIndex = currentSelIndex - 1;
if (currentSelIndex < 0) {
currentSelIndex = liLength - 1;
}
}
if (currentSelIndex != -1) {
document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";
document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;
}
if (oldSelIndex != -1) {
document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";
}
}
//下移
if (event.keyCode == 40) {
if (currentSelIndex == liLength - 1) {
currentSelIndex = 0;
}
else {
currentSelIndex = currentSelIndex + 1;
if (currentSelIndex > liLength - 1) {
currentSelIndex = 0;
}
}
if (currentSelIndex != -1) {
document.getElementById("li_" + currentSelIndex).style.backgroundColor = "#cbf3fd";
document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;
}
if (oldSelIndex != -1) {
document.getElementById("li_" + oldSelIndex).style.backgroundColor = "#ffffff";
}
}
}
}
else if (event.keyCode == 13) {
if (document.getElementById("ulItems").style.display != "none" && liLength > 0 && currentSelIndex != -1) {
document.getElementById("txtKeyword").value = document.getElementById("li_" + currentSelIndex).innerText;
document.getElementById("ulItems").style.display = "none";
currentSelIndex = -1;
oldSelIndex = -1;
}
}
else {
autoComplete(keyword);
document.getElementById("ulItems").style.display = "";
currentSelIndex = -1;
oldSelIndex = -1;
}
}
}
function autoComplete(keyword) {
var liHtml0 = "<li id=\"li_0\">1</li><li id=\"li_1\">12</li><li id=\"li_2\">123</li><li id=\"li_3\">1234</li>";
var liHtml1 = "<li id=\"li_0\">12</li><li id=\"li_1\">123</li><li id=\"li_2\">1234</li>";
var liHtml2 = "<li id=\"li_0\">123</li><li id=\"li_1\">1234</li>";
var liHtml3 = "<li id=\"li_0\">1234</li>";
if (keyword == "1234") {
document.getElementById("ulItems").innerHTML = liHtml3;
}
else if (keyword == "123") {
document.getElementById("ulItems").innerHTML = liHtml2;
}
else if (keyword == "12") {
document.getElementById("ulItems").innerHTML = liHtml1;
}
else if (keyword == "1") {
document.getElementById("ulItems").innerHTML = liHtml0;
}
else {
document.getElementById("ulItems").innerHTML = "";
}
}
</script>
</head>
<body>
<input id="txtKeyword" type="text" onkeyup="selectItem(this.value, event)" style="width:200px;" />
<ul id="ulItems" style="display: none; border:1px solid #cecece; border-top:none; width:200px; padding:2px; margin:0px;">
</ul>
</body>
</html>