JavaScript实现搜索框智能提示上下移动效果-javascript点击按钮左右移动

最近公司网站首页搜索框改进，需要在智能提示列表上加上支持键盘上下键移动的效果。
搞了一晚上，下面呈上纯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>
【编辑推荐】