[英]Too fast JavaScript function
我是JavaScript的新手,我正在尝试使用一些搜索功能来处理少量数据。
我有下一个HTML代码:
<form name="f1">
<input type="text" name="sbox" onkeydown=keysearch(event)>
<button type="button" onclick=search()></button>
</form>
以及实现de功能的下一个JavaScript(它隐藏所有块,然后显示其中的一些,比较它们的文本(on)和搜索框上的文本):
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:在此之前,我会对这个搜索框进行“即时搜索”,所以如果你有一些想法......再次感谢你。
我尝试了你的代码,它似乎工作,但一个例外。 当您在输入字段中按Enter键并注册密钥代码13时,您还会调用表单的默认操作。 哪个是用http请求发布表单。 所以你的页面会重新加载,使你的javascript无用。 它会弹出一秒钟。 然后在重装时消失。
尝试在提交表单时返回false,如下所示。
<form name="f1" onsubmit="return false;">
这是一种非常简单的方法来阻止它,它仍然可以在禁用javascript的情况下运行,因为实际操作将会运行。
如果你感兴趣的话,有一个很好的方法可以用jQuery做到这一点。
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 );
}
}
如果没有设置其动作,则表单形式不正确。 在某些浏览器中,如果您错过了这个,则按Enter键刷新页面。 这种情况发生在你的情况下。
更改
<form name="f1">
至
<form name="f1" action="javascript:void(0);">
另请参阅此stackoverflow答案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.