Too fast JavaScript function

Question

I am new on JavaScript, and I was trying to do a search function, to a little amount of data.

I have the next HTML code:

<form name="f1">
    <input type="text" name="sbox" onkeydown=keysearch(event)>
    <button type="button" onclick=search()></button>
</form>

And the next JavaScript to implement de functionality (it hide all blocks, and then do visible some of them, comparing their text (on ) and the text on search box):

function search() {
word = f1.sbox.value.toLowerCase()

v = document.getElementsByClassName('item')
for( i=0; i<v.length; ++i ) {
    v[i].style.display = 'none'

    s1 = i.toString()
    if( document.getElementById(s1).innerHTML.toLowerCase().indexOf(word) != -1 ) {
        s2 = s1 + "b";
        document.getElementById(s2).style.display = 'block'
    }
}
}

To apply on elements like that:

<div id="items">
    <article id="0b" class="item">
        <h3><a id="0" href="http://www.example.com/">Example</a></h3>
        <img src="example.jpg">
    </article>
(...)
</div><!-- end items -->

So, all that works right. The Problem is when I try to add another function to allow user use de Enter key, not only use the click mouse to use the search box. This is my code:

function keysearch(e) {
    var charCode

    if( e && e.which ) {
        charCode = e.which
    } else if( window.event ) {
        e = window.event
        charCode = e.keyCode
    }

    if( charCode == 13 ) {
        search() // call the function above
    }
}

I have some kind of problem that I can't find. In fact, the second function also works, but it do too fast, so I can see the results of it for less than a second, and then all things return to their place.

Please... Some idea about it?

Thank you very much.

PS: Before that, I would do an 'instant search' for this search box, so if you have some idea... Thank you again.

Answer 1

I tried your code, it seems to work, but one exception. When you press enter in the input field, and key code 13 is registred, you also invoke the default action of the form. Which is to post the form with http request. So your page will reload, rendering your javascript useless. It will pop up for just a second. Then disappear on the reload.

Try returning false on your submit of the form, like this.

<form name="f1" onsubmit="return false;">

This is a very easy way to prevent it, it will still work with javascript disabled since the actual action will then run.

There's a nifty way to do this with jQuery as well if you're interested.

http://api.jquery.com/event.preventDefault/

Answer 2

var keycheckTimeout;
function keysearch(e) {
    var charCode

    if( e && e.which ) {
        charCode = e.which
    } else if( window.event ) {
        e = window.event
        charCode = e.keyCode
    }

    if( charCode == 13 ) {
        clearTimeout( keycheckTimeout );
        keycheckTimeout = setTimeout( function() { search(); }, 1000 );
    }
}

Answer 3

A form is not properly formed without its action being set. In some browsers if you miss this out then pressing the Enter key refreshes the page. This was happening in your case.

change

<form name="f1">

to

<form name="f1" action="javascript:void(0);">

See also this stackoverflow answer