类似百度搜索框的输入提示的功能。
允许使用鼠标点击选中提示栏中的某个选项
允许使用键盘上下键来选中提示栏中的某个选项，回车确认选中
选中后，提示内容变更到输入框
俺的思路就是当焦点在搜索框并且输入框的内容不为空时，就用Ajax获取后台数据（这里用的是JSON），获取和输入有关的内容（这里我图方便用了索引，不然应该要截取字符串的第一个字符来匹配），然后就是获取所有的li，先默认对第一个元素加上选中的样式。如果键盘按上按下框就会随之移动（移动前先循环判断此时有没有哪一个元素是加上了选中样式的，如果有先取消）
做完了之后的bug大概有：没有实现鼠标经过的li自动加上选中样式，Ajax请求的时候很迷的一点就是输入了之后要先取消焦点，再获取焦点才能显示数据，显示之后还要再重复上述过程才会出现搜索框的选中样式。。。。（狠狠沉默）
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
ul {
display: none;
width: 160px;
padding: 10px;
list-style: none;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.color {
border: 1px solid black;
background-color: aliceblue;
}
</style>
</head>
<body>
<input type="text" />
<ul id="box">
<!-- <li>1</li>
<li>2</li>
<li>3</li> -->
</ul>
<script>
window.onload = function() {
//var lis = document.querySelectorAll('li');
var input = document.querySelector('input');
var ul = document.querySelector('ul');
var flag = false;
input.addEventListener('focus', function() {
if (input.value != ''&&flag==false) {
ul.style.display='block';
console.log(input.value);
//ajax
$(function() {
$.ajax({
type: "GET", //请求方式
url: "item1.json", //地址，就是json文件的请求路径
dataType: "json", //数据类型可以为 text xml json script jsonp success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
success: function(result) {
//result是一个集合,所以需要先遍历
$.each(result, function(index, obj) {
//这里的内容等于输入框的
if (obj['index'] == input.value) {
$("#box").append("<li>" + obj['email'] +
"</li>");
}
});
flag = true;
}
});
});
}
if (flag == true) {
var lis = document.querySelectorAll('li');
console.log(lis);
lis[0].className='color';
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('mousedown', function() {
//console.log(lis[i].innerHTML);
lis[i].style.className='color';
input.value = lis[i].innerHTML;
})
}
//允许使用键盘上下键来选中提示栏中的某个选项，回车确认选中
document.addEventListener('keydown', function(e) {
let n = 1;
console.log(e.keyCode);
if (e.keyCode == 38) {
//有一个框向上移动，选中上一个li
for (let n = 0; n < lis.length; n++) {
if (ul.children[n].className == 'color') {
ul.children[n].removeAttribute('class');
if (n - 1 >= 0) {
ul.children[n - 1].className = 'color';
break;
} else {
lis[0].className = 'color';
console.log('到顶了');
}
}
}
}
if (e.keyCode == 40) {
//判断一下此时被选中的是哪个元素
for (let n = 0; n < lis.length; n++) {
if (ul.children[n].className == 'color') {
//console.log(n);
ul.children[n].removeAttribute('class');
if (n + 1 < lis.length) {
console.log(n + 1);
ul.children[n + 1].className = 'color';
break;
} else {
console.log('到底了');
}
}
}
}
if (e.keyCode == 13) {
//回车的时候把当前元素的内容赋值给input
for (let n = 0; n < lis.length; n++) {
if (ul.children[n].className == 'color') {
input.value = ul.children[n].innerHTML;
}
}
}
})
}
})
}
</script>
</body>
</html>
再附上我的JSON文件，数据比较乱。。
{
"index":"1",
"email":"1111y"
},
{
"index":"2",
"email":"23.com"
},
{
"index":"2",
"email":"2222q"
},
{
"index":"1",
"email":"111z"
}
]
