2012-02-23 7 views
1

可能性の重複に沿ったライブフィルタを保つ:
Run javascript function when user finishes typing instead of on key up?jqueryのは、高速なキーストローク

私はおよそ1万項目の長いリストをフィルタリングします迅速なライブフィルタを書きました。各項目の子要素には、それらに関連する多数のメタデータがあります。説明、関連文書、使用法など。私は一度に手紙を持ち込み、そこからページをフィルタリングします。誰かがすばやくタイプすると、ページが追いついていない可能性があります。 「Cam」と入力するとタグCのIDSが複数受信されることがあります。

私の質問キーストロークが停止するまで、関数呼び出しを制限する方法がある尋ねます。ほとんどキーストロークの邪魔です。

ここで私は私が何をしているのかを見せつけた素早いフィドルですhttp://jsfiddle.net/kb8Hw/ しかし、私のコードは少し複雑です。私は長いリストを持って、一度に1文字に制限し、検索文字列をもう少し標準化します。本質的には、this.value[0]が変更されるたびにサーバーに戻り、新しいタグセットを取得します。そこから、jqueryを使ってページ上のものをフィルタリングします。

+0

はあなたが何をしたいの線に沿って、このものです:http://stackoverflow.com/questions/4220126/run-javascript-function-when-キー入力の代わりにユーザー仕上げ入力 - – itsmequinn

+0

はい、私はそれが前に尋ねられたと考えました。私は検索しましたが、文字列についてはわかりませんでした。私はこれが嘘としてマークされるべきだと思います。 – matchew

+0

私は一週間前にそれが必要だったので、私はそれが存在することを知っていただけで、私のお気に入りを見ました。 – itsmequinn

答えて

3

タイマーを開始します。キーを押すたびにリセットします。ユーザーが入力を停止すると(300〜600 msが良好)、タイマーが起動します。あなたの関数を呼び出します。

+0

あなたの答えを示す謎です:http://jsfiddle.net/maniator/kb8Hw/2/ – Neal

+0

悪い考えではありません。私はそれが行くべき方向だと考えましたが、私はこのことについて第2意見を求めました。 – matchew

+0

@matchew実装のためのフィドルを参照してください。 – Neal

1

通常、実際の検索を開始するには、clearTimeoutsetTimeoutを使用します。

キーアップでは、検索を直接行うのではなく、たとえば500ms後に検索を実行するタイマーを開始します。

clearTimeoutの呼び出しでは、以前のキーアップで開始された以前のタイマーが停止しています(入力された各文字に対してkeyupイベントが発生します)。

例:

var to; 

$('#live-search').on('keyup', '#live-search-box', function() { 
    var val = this.value; 
    clearTimeout(to); 
    to = setTimeout(function() { 
     $('#countries').find('span').show(); 
     if (val) { 

      $('#countries').find('span').hide(); 
      $('#countries').find('span[id^=' + val.toLowerCase() + ']').fadeIn('fast'); 

     } 
    }, 500); 
}); 

DEMO

関連する問題