javascript - key 代码 13 不起作用

Question

我在我的应用程序中开发了搜索功能。用户可以通过在输入框中键入地址来搜索街道。 Onkeyup，调用一个函数，将输入与充满地址的数据库进行比较。该函数返回 5 个建议，这些建议显示在输入框下方，就像一种下拉菜单。这工作得很好。用户随后可以选择其中一个建议，这会触发另一个功能。

我现在想要实现的是，当用户按下 ENTER 时，会使用第一个建议自动调用第二个函数。我以为编程不会那么困难，但我遇到了一些困难。当我按 Enter 时，页面会刷新，而不是转到该函数。

这是我的代码:

<div id = "toolbar">
<form id ="suggestions">
    <input type = "text" id = "insertText" autocomplete="off" onkeyup = "if(event.keyCode == 13) {SearchAddress(option1.text)} else {giveSuggestion()}" onfocus='showOptions()'
    <option class="option" id = "option1" onmousedown = "searchAddress(option1.text)"></option>
    <option class="option" id = "option2" ... </option>
</form>
</div>

CSS

#toolbar {
        position: fixed;
        width: 100%;
        height: 25px;
        top: 0;
        left: 0;
        padding: 5px 10px;
        background: #ccc;
        border-bottom: 1px solid #333;
    }
#suggestions {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 310px;
        top: 5px;
        background-color: white;
        font-size: 12px;
    }
.option{
        display:none;
        cursor: default;
        padding: 0px 3px;
    }

有什么建议吗？

Answer 1

当您点击enter时，浏览器会尝试提交表单。

因此，有两种可能的解决方案:

1. 如果您不需要将任何数据从表单标签发送到后端，请删除表单标签。
2. 将 onsubmit="return false;" 添加到表单标记。