keyCode 13 not working

Question

I have developed a search feature in my application. Users can search for streets by typing the address in an input box. Onkeyup, the a function is called that compares the input against a database full of addresses. The function gives back 5 suggestions which are showed below the inputbox like a sort of dropdownmenu. This works perfectly fine. The user can afterwards select one of the suggestions, which triggers another function.

What I want to implement now is that, when the user presses ENTER, the second function is automatically called with the first suggestion. I thought it would not be that difficult to program, but I'm facing some difficulties. When I press enter, the page refreshes instead of going to the function.

Here is my code:

<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;
    }

Any suggestions?

_"the page refreshes"_ -> technically the form is submitting, and hasn't got an action, so it sends it back to the same page, causing it to reload. — James Thorpe, Dec 04 '15 at 12:23

score 2 · Accepted Answer · answered Dec 04 '15 at 12:25

2

When you hit enter the browser tries to submit the form.

So, there are two possible solutions:

Remove form tag, if you don't need to send any data from it to the backend.
Add onsubmit="return false;" to the form tag.

answered Dec 04 '15 at 12:25

Microfed

2,832
22
25

Thanks! Guess I didn't know what a form-tag did... – Wout Dec 04 '15 at 12:45
Thanks for the solution. In my case I had used e.keycode instead of e.keyCode. Missed Camel Case (camelCase). – karthik kasubha May 11 '21 at 05:35

score 0 · Answer 2 · edited Dec 04 '15 at 12:28

0

I guess the browser didn't know what event is So......

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

edited Dec 04 '15 at 12:28

Shnugo

66,100
9
53
114

answered Dec 04 '15 at 12:23

AVAVT

7,058
2
21
44

1

The browser know the event [fiddle](https://jsfiddle.net/jnwrc5ay/5/). – Zakaria Acharki Dec 04 '15 at 12:25

score 0 · Answer 3 · answered Dec 04 '15 at 12:37

0

The default behavior of form will refresh the page, so place replace the form tag to div, and handle the form submit yourself use library like jQuery or vanilla XMLHttpRequest object.

answered Dec 04 '15 at 12:37

David Guan

4,180
1
25
32

keyCode 13 not working

3 Answers3