<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
.current{background-color:red}
</style>
</head>
<body>
<input id="SearchResult" type="text"/>
<ul id="ulSearch">
<li>中海創集團</li>
<li>福大自動化</li>
<li>奧邁軟件e79fa5e98193e4b893e5b19e31333366306435</li>
<li>自控規划部</li>
<li>愛普科技</li>
<li>IAP</li>
<li>ISEE</li>
<li>聯排聯調</li>
<li>水系</li>
<li>雲計算</li>
</ul>
<script>
var list = document.getElementById("ulSearch").getElementsByTagName("li");
var index = -1;
function addIndex() {
index = index>=9 ? 0 : ++index;
return index;
}
function reduceIndex() {
index = index <= 0 ? 9 : --index;
return index;
}
document.onkeydown = function(e) {
e = e || window.event;
switch(e.keyCode){
case 13:
var t = document.getElementById("ulSearch").getElementsByTagName("li")[index].innerHTML;
document.getElementById("SearchResult").value = t;
break;
case 38:
reduceIndex();
setLiColorByClass();
break;
case 40:
addIndex();
setLiColorByClass();
break;
}
function setLiColorByClass(){
for(var i = 0,len=list.length; i<len; i++) {
list[i].className = i==index ? "current" : "";
}
}
};
</script>
</body>
</html>
轉載：https://zhidao.baidu.com/question/584524937.html
優化版（向下到最后一個li后再按下箭頭則循環到第一個li）：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
.current{background-color:red}
</style>
</head>
<body>
<input id="SearchResult" type="text"/>
<ul id="ulSearch">
<li>中海創集團</li>
<li>福大自動化</li>
<li>奧邁軟件e79fa5e98193e4b893e5b19e31333366306435</li>
<li>自控規划部</li>
<li>愛普科技</li>
<li>IAP</li>
<li>ISEE</li>
<li>聯排聯調</li>
<li>水系</li>
<li>雲計算</li>
</ul>
<script>
var list = document.getElementById("ulSearch").getElementsByTagName("li");
var index = -1;
var liLength = list.length-1;//比上一版多了-1
function addIndex() {
index = index>= liLength ? 0 : ++index;
return index;
}
function reduceIndex() {
index = index <= 0 ? liLength : --index;
return index;
}
document.onkeydown = function(e) {
e = e || window.event;
switch(e.keyCode){
case 13:
var t = document.getElementById("ulSearch").getElementsByTagName("li")[index].innerHTML;
document.getElementById("SearchResult").value = t;
break;
case 38:
reduceIndex();
setLiColorByClass();
break;
case 40:
addIndex();
setLiColorByClass();
break;
}
};
function setLiColorByClass(){
for(var i = 0,len=list.length; i<len; i++) {
list[i].className = i==index ? "current" : "";
}
console.log(list.length);
}
</script>
</body>
</html>