-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 =""; 变量lastid =“”；变量参数；

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 回答