1

ユーザーが入力するときにAjax検索/オートコンプリートを実現しようとしています。コードは次のとおりです。

$('#productSearch').live('keyup',function(){
    var searchterm = encodeURIComponent($('#productSearch').val());
    $('.ajax-search-results').load('/ajax/search.php?type=product&s=' + searchterm);

});

問題は、結果が入力値と一致しないことです。理由はわかりませんが、入力が速すぎると（.load（）を処理するには速すぎるのではないでしょうか？）、最後の結果は一貫していません（私が期待するものではありません）。 ）ゆっくり入力すると、完全に機能します。

誰かが私にこの状況をどうやって乗り越えることができるか教えてもらえますか？

  • ロードが完了するまで機能を無効にすることを考えましたが、それはまた、操作が完了するまでユーザーが入力したものを失うことを意味しますか？
4

1 に答える 1

1

これは通常、小さなタイムアウトで修正され、ユーザーが高速で入力したときにすべてのキーに対してajaxを実行し、通常の$ .ajax呼び出しを実行する場合は前の呼び出しを中止します（abort()XHRにはそれほど簡単ではありません）。 load（）を使用）：

var timer;

$(document).on('keyup', '#productSearch',function(){
    clearTimeout(timer);
    timer = setTimeout(function() {
        var searchterm = encodeURIComponent($('#productSearch').val());
        $('.ajax-search-results').load('/ajax/search.php?type=product&s=' + searchterm);
    }, 300);
});
于 2012-11-03T12:41:58.193 に答える