JavaScript功能太快

我是JavaScript新手，我试图做一个搜索功能，以少量的数据。JavaScript功能太快

我的下一个HTML代码：

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

而接下来的JavaScript来实现去功能（它可以隐藏所有的块，然后做可见他们中的一些，在比较他们的文字（上）和文本搜索框）：

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

所以，一这是正确的。问题是当我尝试添加另一个功能以允许用户使用de 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：在此之前，我会为此搜索框执行“即时搜索”，所以如果您有一些想法...再次感谢您。

来源

2013-02-19 DanielM

不知道你的问题，但你可以通过跟踪功能的console.log调用你的代码的进展。它确实有助于快速调试。 – 2013-02-19 08:14:07

所以你想让'自动完成'功能在keydown延迟一段时间后工作？ – cwdoh 2013-02-19 08:21:52

再次加载您的页面之类的声音。至少IE会在'input：text'上按'ENTER'时提交一个'form'。为了防止出现这种情况，您需要防止默认操作，该操作在（旧）IE中由'event.cancelBubble = true; event.returnValue = false;'。 – Teemu 2013-02-19 08:27:03

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

来源

2013-02-19 08:26:27 cwdoh

我试过你的代码，它似乎工作，但有一个例外。当您在输入字段中按回车键，且键码13被注册时，您也会调用表单的默认操作。这是用http请求发布表单。所以你的页面会重新加载，使你的JavaScript无用。它会弹出一秒钟。然后在重新加载时消失。

尝试在您提交的表单中返回false，就像这样。

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

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

如果您有兴趣，还可以使用jQuery来做到这一点。

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

来源

2013-02-19 08:29:27

非常感谢！现在，它工作正常！ :) – DanielM 2013-02-19 09:42:21

请标记为已回答。 :) – 2013-02-19 11:32:23

甲形式不正确地形成而不被设置其动作。在某些浏览器中，如果你错过了这个选项，那么按下回车键会刷新页面。这是发生在你的情况。

变化

<form name="f1">

到

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

另见本stackoverflow answer

来源

2013-02-19 09:25:11 jing3142

你的解决方案也可以，也可以在其他答案上添加onKeyPress =“if（event.which == 13）return false;”）谢谢;） – DanielM 2013-02-19 14:01:01

JavaScript功能太快

回答

相关问题