我是JavaScript新手,我试着做一个搜索功能,对少量的数据。
我有下一个HTML代码:
<form name="f1">
<input type="text" name="sbox" onkeydown=keysearch(event)>
<button type="button" onclick=search()></button>
</form>
和下一个JavaScript实现de功能(它隐藏所有块,然后做可见的一些,比较他们的文本(上)和搜索框上的文本):
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 -->
所以,所有的工作权利.问题是,当我试图添加另一个函数,让用户使用回车键,而不是只使用鼠标点击使用搜索框.这是我的代码:
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:在此之前,我会为这个搜索框做一个“即时搜索”,所以如果你有一些想法...再次感谢。
3条答案
按热度按时间gzjq41n41#
我试过你的代码,看起来很有效,但有一个例外。当你在输入框中按下enter键,键码13被注册时,你也会调用表单的默认操作。也就是用http请求发布表单。所以你的页面会重新加载,使你的javascript变得无用。它会弹出一秒钟。然后在重新加载时消失。
尝试在提交表单时返回false,如下所示。
这是一个非常简单的方法来防止它,它仍然可以工作与javascript禁用,因为实际的行动,然后将运行。
如果您感兴趣的话,使用jQuery也有一种很好的方法来完成这项工作。
http://api.jquery.com/event.preventDefault/
4ioopgfo2#
bxfogqkk3#
如果没有设置表单的动作,表单就不能正确地形成。在一些浏览器中,如果你错过了这个动作,那么按Enter键会刷新页面。这就是你的例子。
变化
到
另请参见此stackoverflow answer