-1

このウェブサイトを作成しました。検索ボックスに文字をゆっくり入力する場合 (5 つの結果が表示される) は問題なく動作しますが、速く入力すると 5 つの結果の倍数が表示され、.empty()動作しないことが示されます。ガイドしてください。

ドキュメントレディ、

<script type="text/javascript">
$(document).ready(function () {
$("#search").keyup(function(e){
$("#status").empty();
/*
var keyCode = e.keyCode || e.which;

if(keyCode == 13) {*/
myFunction();
//}
});
$("#status").hide();
$("#more").hide(); 
});
</script>

いくつかの JS が追加されました。var nexturl =""; var lastid =""; var パラメータ;

function myFunction() {
    param = $('#search').val();
    //alert("I am an alert box!");
    if (param != "") {
        $("#status").show();
        //alert("Show ");
        var u = 'https://graph.facebook.com/search/?callback=&limit=5&q='+param;
        $("#data").empty();     //empty the data div
        //alert("emptied?");
        getResults(u);
        $("#more").show(); 
        }

    $("#more").click(function () { 
    $("#status").show();
    //alert("Show ");
    $("#more").hide();  
    pageTracker._trackPageview('/?q=/more');
    var u = nexturl;
    getResults(u);
  });
}
</script>

関連するHTML、

<div style="margin-bottom:10px;float:right;">
        <form action="" method="get" id="searchform" onsubmit="return false;">
        <input name="q" type="text" id="search" onClick="this.select();" size="32" maxlength="128" class="txt"  style="padding: 0 5px;" >
        <input type="button" id="hit" value="Search" onclick="myFunction();return false" class="btn">
        </form>
</div>
</div>
<div id="data_container">
<div id="data">
    <div id="status_container">
  <div id="status"><img src="loader.gif" alt="loading facebook status search"/></div>
  </div>
</div>
</div>

getResults() 関数、

function getResults(u) {
//$("#status").show();  
$("#data").empty();                                                 // print that we are in
    $.ajax({
        dataType: "jsonp", 
        url: u,
        success: function(res) {                                                        // take an object res
                $("#data").empty(); 
              $("#status").show();                                                      // show status
              $("#more").show();    
              if (res.data.length) {                                                    // check length of res
                                                                    // print if >0
                nexturl = res.paging.next;                                              // calculate next url
                  $.each(res.data, function(i,item){
                    if (item.id != lastid) {
                        lastid = item.id;
                        var html ="<div class=\"post\">";

                        html += "<div class=\"message\"><a href=\"http:\/\/www.facebook.com\/profile.php?id="+item.from.id+"\">"+item.from.name+"</a> ";

                        if (item.message) { 
                            html += item.message+"<\/div>";
                        } else {
                            html += "<\/div>";
                        }
                        if (item.picture) { 
                            html += "<div class=\"image\"><img src=\""+item.picture+"\"></div>";
                        } else {
                            html += "<div class=\"image\"><\/div>";
                        };
                        if (item.link) { 
                            html += "<div class=\"link\"><a href=\""+item.link+"\">"+item.name+"</a></div>";

                            if (item.caption) { 
                                    html += "<div class=\"caption\">"+item.caption+"</div>";
                            };
                            if (item.description) { 
                                    html += "<div class=\"description\">"+item.description+"</div>";
                            };

                        };

                        html += "<div class=\"meta\">";

                        if (item.icon) { 
                            html += "<span class=\"icon\"><img src=\""+item.icon+"\"></span> ";
                        };
                        var t = item.created_time;
                        var time = t.substring(0,19)+"\+00:00";
                        html += "<span class=\"time\">"+$.cuteTime({},time)+"<\/span> ";
                        html += " <\/div>";

                        html +="</div>";
                        $("#data").append(html) ;
                    }
                  });
                    $("#more").appendTo("#data");
                    $("#more").show();
                    $("#status").appendTo("#data");


            } else {
                $("#data").append("<h3 class=\"none\">No entries found. Please try another search.</h3>");
            }; 
        } 

    });
}
4

1 に答える 1

1

ChromeとFireFoxではそれは私のために働きます。それはキャラクターごとに変化し続け、追いつく-これは典型的なことです。ただし、結果の変更の間に短い遅延を追加することをお勧めします。これにより、テスト目的で変更を追跡および監視したり、.empty（）が起動したときにコンソールにレポートしたり、セレクターの内容を報告したりできます。その後、期待どおりに機能することを確認します。

于 2013-03-05T14:23:51.117 に答える