可以利用键盘上下键进行选取，回车键进行选中
思路：
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>
背景图
效果图
