最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

最近公司網(wǎng)站首頁搜索框改進(jìn)，需要在智能提示列表上加上支持鍵盤上下鍵移動的效果。

創(chuàng)新互聯(lián)從2013年成立，先為鐵山等服務(wù)建站，鐵山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鐵山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

搞了一晚上，下面呈上純javascript代碼，沒有用到j(luò)query等其他類庫。

以下僅供自己收藏，貼上來希望能起到拋磚引玉的作用。

 
 
 
 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
        ul,li{list-style-type:none;}  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
        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; //獲取列表數(shù)量  
  
  
  
  
                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 = "1
121231234";    
  
  
  
            var liHtml1 = "12
1231234";    
  
  
  
            var liHtml2 = "123
1234";    
  
  
  
            var liHtml3 = "1234
";    
  
  
  
            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 = "";  
  
  
  
  
            }  
  
  
  
  
        }  
  
  
  
  
      
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
  
  
  
  
  
 
 
 
 

【編輯推薦】

1. 快速判斷JavaScript對象是否存在的十個方法
2. JavaScript重構(gòu)深入剖析
3. 在JavaScript中監(jiān)聽IME鍵盤輸入事件
4. 19個很有用的JavaScript庫強(qiáng)烈推薦
5. 4月超棒的JavaScript游戲開發(fā)框架推薦

文章標(biāo)題：JavaScript實(shí)現(xiàn)搜索框智能提示上下移動效果
鏈接URL：http://www.fisionsoft.com.cn/article/cosgjog.html