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

Posted on 2011-06-08 23:09 杨锐-->天柱山 阅读(597) 评论(3) 编辑 收藏

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

搞了一晚上，下面呈上纯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 && document.getElementById( " ulItems " ).style.display != " none " ) {
if (liLength > 0 ) {
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>

 

转载于:https://www.cnblogs.com/softwareking/archive/2011/06/09/2076047.html