web-dev-qa-db-ja.com

Ajaxとキープレスを使用して最適化された検索

ユーザーがテキストボックスに入力しているときにデータベースを検索するために使用したい次のコードがあります。以下のコードは正常に機能しますが、ユーザーが本当に高速で入力しているように、少し非効率的です。必要以上に多くの検索を行う可能性があります。ユーザーが「セーリング」と入力している場合、「sail」、「saili」、「sailin」、「sailing」で検索しています。

キーを押すまでの特定の時間を検出する方法があるかどうかを確認したいので、ユーザーが500ミリ秒またはこのような入力を停止した場合にのみ検索します。

このようなもののベストプラクティスはありますか？

$('#searchString').keypress(function(e) {

    if (e.keyCode == 13) {

        var url = '/Tracker/Search/' + $("#searchString").val();
        $.get(url, function(data) {
            $('div#results').html(data);
            $('#results').show();
        });
    }
    else {

        var existingString = $("#searchString").val();
        if (existingString.length > 2) {
            var url = '/Tracker/Search/' + existingString;
            $.get(url, function(data) {
                $('div#results').html(data);
                $('#results').show();
            });
        }
    }
jqueryajaxsearchkeypress
41
leora

次のようなことができます：

$('#searchString').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode == 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 500));
});
function search(force) {
    var existingString = $("#searchString").val();
    if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
    $.get('/Tracker/Search/' + existingString, function(data) {
        $('div#results').html(data);
        $('#results').show();
    });
}

これは、500ms要素の .data()コレクション）にタイマーを保存することにより、#searchStringの後に検索を実行します（これらの状況ではkeyupでkeypressよりも優れています =。すべてのkeyupは、そのタイマーをクリアし、キーが入力された場合、自動検索の前に別の500msタイムアウトを設定していなかった場合、すぐに検索します。

87
Nick Craver

この古い質問をご覧ください：

検索を実行する前にライブjQuery検索を1秒間待機させるにはどうすればよいですか？

3
Adam Asham

私がやることは、キーを押すたびに希望の遅延でsetTimeout関数を使用することです。そのため、その関数はそのタイムアウト後に起動します。キーを押すたびにタイマーが削除され、clearTimeout（）で新しいタイマーが設定されます。

すべての広告をスクロールして、いくつかの例を参照してください。

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

1
johnwards