可以利用鍵盤上下鍵進行選取，回車鍵進行選中
思路：
1、獲取網頁元素
2、輸入框獲取焦點時顯示下拉菜單
3、輸入框失去焦點時隱藏下拉菜單
4、鍵盤上下方向鍵選擇下拉菜單
5、回車鍵把當前選中菜單文字寫入輸入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
body {
background: #23384e;
font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
}
.search,
.search .inner-box,
.search .box,
.search .select,
.search a {
background: url(../images/search.jpg) no-repeat;
}
.search,
.search .box,
.search .inner-box {
height: 34px;
}
.search {
position: relative;
width: 350px;
margin: 10px auto;
}
.search .box {
background-position: right 0;
}
.search .inner-box {
background-repeat: repeat-x;
background-position: 0 -34px;
margin: 0 20px 0 40px;
}
.search .select {
float: left;
color: #fff;
width: 190px;
height: 22px;
border: none;
cursor: pointer;
margin-top: 4px;
line-height: 22px;
padding-left: 10px;
background-position: 0 -68px;
}
.search a {
float: left;
width: 80px;
height: 24px;
color: #333;
letter-spacing: 4px;
line-height: 22px;
text-align: center;
text-decoration: none;
background-position: 0 -90px;
margin: 4px 0 0 10px;
}
.search a:hover {
color: #f60;
background-position: -80px -90px;
}
.search ul {
position: absolute;
top: 26px;
left: 40px;
color: #fff;
width: 198px;
background: #2b2b2b;
border: 1px solid #fff;
display: none;
}
.search ul li {
height: 25px;
line-height: 24px;
cursor: pointer;
padding-left: 10px;
margin-bottom: -1px;
border-bottom: 1px dotted #fff;
}
.search ul li:hover,
.search ul li.active {
background: #8b8b8b;
}
</style>
</head>
<body>
<div class="search">
<div class="box">
<div class="inner-box">
<input
type="text"
id="keyword"
class="select"
autocomplete="off"
placeholder="請選擇遊戲名稱"
/>
<a href="#">搜索</a>
</div>
</div>
<ul>
<li>地下城與勇士</li>
<li>魔獸世界（國服）</li>
<li>魔獸世界（臺服）</li>
<li>熱血江湖</li>
<li>大話西遊II</li>
<li>QQ幻想世界</li>
<li>幻想世界</li>
</ul>
</div>
<script>
window.onload = function() {
//1、獲取頁面元素
var keyword = document.querySelector("#keyword");
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");
//2、輸入框獲取焦點時顯示下拉菜單
keyword.onfocus = function() {
ul.style.display = "block";
//定義lis的索引
var index = -1;
//給keyword綁定 就鍵盤擡起來事件
//4、鍵盤上下方向鍵選擇下拉菜單
keyword.onkeyup = function(e) {
//上鍵====38
if (e.which === 38) {
index--;
if (e.index < 0) {
index = lis.length - 1;
}
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
lis[index].className = "active";
}
//下鍵===40
if (e.which === 40) {
index++;
if (index > lis.length - 1) {
index = 0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
lis[index].className = "active";
}
//5、回車鍵把當前選中菜單文字寫入輸入框
//回車鍵===13
if (e.which === 13) {
keyword.valuie = lis[index].innerHTML;
//把數據添加到keyword中之後，把keyword失去焦點
keyword.blur();
}
};
};
//3、輸入框失去焦點時隱藏下拉菜單
keyword.onblur = function() {
ul.style.display = "none";
};
};
</script>
</body>
</html>
背景圖
效果圖
