Question

我在我的应用程序中开发了一个搜索功能。用户可以通过在输入框中键入地址来搜索街道。 Onkeyup，调用一个函数，将输入与充满地址的数据库进行比较。该函数返回5个建议，这些建议显示在输入框下方，就像一种dropdownmenu。这完全没问题。用户之后可以选择其中一个建议，从而触发另一个功能。

我现在想要实现的是，当用户按下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

我猜浏览器并不知道是什么事件......

<input type = "text" 
       id = "insertText"
       autocomplete="off" 
       onkeyup = "function(event){if(event.keyCode == 13) 
                                    {SearchAddress(option1.text)} 
                                  else {giveSuggestion()}"
       onfocus='showOptions()'}" />

Answer 2

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

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

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

Answer 3

表单的默认行为将刷新页面，因此将表单标记替换为div，并处理表单提交自己使用库，如jQuery或vanilla XMLHttpRequest 对象。

keyCode 13不工作

3 个答案: