javascript - JavaScript 函数速度太快

Question

我是 JavaScript 新手，我正在尝试对少量数据执行搜索功能。

我有下一个 HTML 代码:

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

以及下一个实现 de 功能的 JavaScript(它隐藏所有 block ，然后使其中一些 block 可见，比较它们的文本(在 )和搜索框中的文本):

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

要应用于这样的元素:

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

所以，一切正常。问题是当我尝试添加另一个功能以允许用户使用 Enter 键时，而不仅仅是使用单击鼠标来使用搜索框。这是我的代码:

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

我遇到了一些我找不到的问题。事实上，第二个函数也可以工作，但是它执行得太快了，所以我不到一秒钟就可以看到它的结果，然后所有的东西都回到了原来的位置。

请...对此有什么想法吗？

PS:在此之前，我会对此搜索框进行“即时搜索”，所以如果您有任何想法...再次感谢您。

Answer 1

我尝试了你的代码，它似乎可以工作，但有一个异常(exception)。当您在输入字段中按 Enter 键并注册键代码 13 时，您还会调用表单的默认操作。也就是用http请求发布表单。所以你的页面将重新加载，使你的 JavaScript 变得无用。它会弹出一秒钟。然后在重新加载时消失。

尝试在提交表单时返回 false，如下所示。

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

这是一个非常简单的方法来防止它，它仍然可以在禁用 javascript 的情况下工作，因为实际操作将运行。

如果您有兴趣，也可以使用 jQuery 实现此目的。

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