0

我是 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：在此之前，我会对这个搜索框进行“即时搜索”，所以如果你有什么想法……再次感谢你。

4

3 回答 3

2

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

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

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

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

如果您有兴趣，也可以使用 jQuery 进行此操作。

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

于 2013-02-19T08:29:27.217 回答
0 
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-19T08:26:27.600 回答
0

如果没有设置它的动作，表单就不能正确形成。在某些浏览器中，如果您错过了这一点，则按 Enter 键会刷新页面。这发生在你的情况下。

改变

<form name="f1">

至

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

另请参阅此stackoverflow 答案

于 2013-02-19T09:25:11.297 回答