0

私はJavaScriptが初めてで、少量のデータに対して検索機能を実行しようとしていました。

次の HTML コードがあります。

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

そして、機能を実装する次の 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 -->

それで、すべてが正しく機能します。問題は、マウスをクリックして検索ボックスを使用するだけでなく、ユーザーが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
    }
}

見つからない問題があります。実際、2 番目の関数も動作しますが、動作が速すぎるため、1 秒もかからずに結果を確認でき、その後すべてが元の場所に戻ります。

お願いします...それについて何か考えはありますか？

どうもありがとうございました。

PS: その前に、この検索ボックスの「インスタント検索」を行うので、何かアイデアがあれば... ありがとうございます。

4

3 に答える 3

2

私はあなたのコードを試しましたが、うまくいくようですが、1つの例外があります。入力フィールドで Enter キーを押し、キー コード 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

アクションが設定されていないと、フォームは適切に形成されません。一部のブラウザでは、これを見逃した場合、Enterキーを押すとページが更新されます。これはあなたの場合に起こっていました。

変化する

<form name="f1">

に

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

このstackoverflowの回答も参照してください

于 2013-02-19T09:25:11.297 に答える
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 に答える