keyCode 13 не работает

Question

Я разработал функцию поиска в своем приложении. Пользователи могут искать улицы, введя адрес в поле ввода. Onkeyup вызывается функция a, которая сравнивает входные данные с базой данных, полной адресов. Функция возвращает 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

Когда вы нажмете enter браузер пытается отправить форму.

Итак, есть два возможных решения:

1. Удалить тег формы, если вам не нужно посылать данные с него на внутреннем интерфейсе.
2. Добавить onsubmit="return false;" в форму тега.

Answer 2

Я думаю, что браузер не знает, что это событие так ......

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

Answer 3

поведение по умолчанию формы будет обновлять страницу, так место заменить форму тег DIV, и обрабатывать формы представить себе использовать библиотеку как JQuery или ванильным XMLHttpRequest объекта.