0

データベースを検索し、検索に関連するユーザーを返すオートコンプリート検索ボックスに取り組んでいます。これを行うには jquery ajax を使用しkeyupます。

$("#search").keyup(function(){
    $(".itemSearch").remove();
    $(".notfound").hide();
    $("#searchResultSection").height("70px");
    if(!$("#search").val()){
        $("#searchResultSection").slideUp();
        $(".ajaxLogoSearch").hide();
        $(".notfound").hide();
    }
    else{
        var data = {
            query: $("#search").val()
        };
        $("#searchResultSection").slideDown();
        $(".ajaxLogoSearch").show();
        $.ajax({
            url: '/ajax/search',
            data: data,
            dataType:'json',
            success:function(result){
                if(result.found==0){
                    $(".ajaxLogoSearch").hide();
                    $(".notfound").show();
                }
                else{
                    var searchResult = $("#searchResultSection");
                    $(".ajaxLogoSearch").hide();
                   searchResult.css({"height":20});

                    for(var i=0;i<result.users.length;i++){
                        var content = '<div class="itemSearch">\
                <img src="../../static/social/images/defaultMaleImage.png" height="50px">\
                <p>'+ result.users[i].firstname+ ' '+ result.users[i].lastname +'</p>\
            </div>'
                        if(searchResult.height() < 370){
                            searchResult.height("+=70px");
                        }
                        $("#innerSearch").append(content);
                    }
                    $(".itemSearch").hover(function(){
                        $(this).css({"background":"rgb(55, 108, 221)"});
                    },function(){
                        $(this).css({"background":"#658be6"});
                    });
                }
            }

        });
    }
})

私の問題は、2 文字を入力してすぐに 2 つの ajax リクエストが送信され、検索結果ボックスに検索結果が 2 回表示されることです。

EDIT：あなたの答えに感謝します。 これはソリューションのリンクです

4

2 に答える 2

2

より良い方法は、ユーザーが入力をやめるまで単純にリクエストを送信しないことです。これは、キーダウン イベントと 250 ミリ秒の非アクティブ状態を待機するスロットルを使用して簡単に実行できます。あなたのやり方では、ユーザーが望む結果が得られません。

$("#search").on("keydown",function(){
    var $this = $(this);
    clearTimeout($this.data("throttle"));
    $this.data("throttle",setTimeout(function(){
        doSearch.call($this.get(0),$this.val()); // perform the ajax search
    },250))
});

また、新しい結果を挿入するときは、結果リスト全体を 1 つの変数で作成し、ループの後に .html(thehtml) を使用して一度に挿入します。

于 2013-09-04T19:27:09.450 に答える
0

追加の変数の種類のリクエストを作成する必要があります。この変数は、現在の ajax-request のストア リンクになります。keyup イベントが再び発生したら、チェックを行う必要があります。

if(request) {
    request.abort();
}
request = $.ajax({/* */});

UPD1: 最初の ajax-request が完了した場合は、成功コールバックでリクエスト変数をゼロに設定する必要があります。

UPD2:変更イベントで購読する方が良い

于 2013-09-04T19:31:07.790 に答える