Question

创建了this网站。如果搜索框中的字符输入缓慢（显示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 param;

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>");
            }; 
        } 

    });
}

Answer 1

在Chrome和FireFox中，它确实对我有用。它只是随着每一个角色而不断变化 - 这是典型的。但是，在结果更改之间添加一个短暂的延迟可能是一个好主意，这样您就可以更好地跟踪和观察更改以用于测试目的，或者在.empty（）触发时向控制台报告以及该选择器的内容是什么之后确保它按预期方式工作。

当用户输入太快时，.empty（）无效

1 个答案: