从键盘导航时，当我按下当前填充选项的enter键时，自动完成程序崩溃

Question

我试图实现一个字段，用于输入机场代码和它所在的城市，具有自动完成功能。从建议列表中选择想要填写的选项有三种方法:用鼠标点击想要填写的选项，挂一个标签，或者通过箭头滚动到想要填写的选项，然后按回车键。在前两种情况下，一切都做对了，而在最后一种情况下，我的Codepen页面被"未找到"的铭文所取代。

这是html代码:

<form>
<input autocomplete="off" name="user-input" class="suggest" placeholder="City or airport code"/>
</form>

在js部分中，我使用此代码来跟踪键盘事件，其中activeNumber是我的建议列表中活动项目的位置，只有当使用箭头导航时，它才大于或等于零:

document.addEventListener("keydown", function(e) {
let list = document.querySelector('.autocomplete-list');
if (!list) {
return;
}

list = list.querySelectorAll('.list-item');
// enter
if (e.keyCode === 13) {
if (activeNumber < 0) {
e.target.click();
}
else {
list[activeNumber].click();
}
} else if (e.keyCode == 40) {
activeNumber++;
changeActive(list);
} else if (e.keyCode == 38) {
activeNumber--;
changeActive(list);
} 
})

似乎问题不在于点击监听器的实现，因为当通过选项卡选择时，输入也调用click()，但它有效。问题可能是什么?如何解决?

Answer 1

当您单击enter时，表单被提交。我想这就是为什么没人找到你。

阅读:https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

试着解决这个问题:

<form onsubmit="submitForm(event)">
...
<script type="text/JavaScript">
function submitForm(event) {
event.preventDefault();
window.history.back();
}
</script>