Question

我使用jQuery和PHP构建了一个very simple Twitter Instant Search以获得乐趣。我将一个事件绑定到搜索表单上的keyup，并对一个卷曲Twitter Search JSON的PHP页面进行快速AJAX调用。

<script>
$(function(){
 $('#search').bind('keyup', function(){
  var v = $('#search').val();
  console.log(v);
  $.get('get.php',{q: v, a:''}, function(data){
   obj = {};
   window.tw = '';
    obj = eval('('+ data +')');
  if(typeof obj.results.length !== undefined){
    for (var i=0; i < obj.results.length; i++) {
     tw += '<div class="tweet"><h2><a target="_blank" href="http://twitter.com/'+obj.results[i].from_user+'">@'  + obj.results[i].from_user + '</a></h2> <span>' + obj.results[i].text + '</span><' + '/div>';
    };
    }
   });
 $('#container').html(window.tw);  
 });

});
</script>

尽管返回的console.log值是正确的，但就显示的结果而言仍然落后于1-2个字符。为什么？我该如何解决这个问题？

Answer 1

$('#container').html(window.tw);

这应该在给予$ .get（）

的回调中

$(function(){
    $('#search').bind('keyup', function(){
        var v = $('#search').val();
        console.log(v);
        $.get('get.php',{q: v, a:''}, function(data){
            obj = {};
            window.tw = '';
                        obj = eval('('+ data +')');
                        if(typeof obj.results.length !== undefined){
                for (var i=0; i < obj.results.length; i++) {
                    tw += '<div class="tweet"><h2><a target="_blank" href="http://twitter.com/'+obj.results[i].from_user+'">@'  + obj.results[i].from_user + '</a></h2> <span>' + obj.results[i].text + '</span><' + '/div>';
                };
            }
            $('#container').html(window.tw);    
        });

    });
});

Answer 2

好像你正在立即发送AJAX请求。一旦你这样做，代码变得异步，这意味着它可以根据延迟以任何顺序返回。如果结果返回原始搜索字词，您可以执行匹配以确保返回的结果仍然与搜索框中的结果匹配。

Answer 3

您确定问题不在流程的get.php部分吗？

修改

啊，我想我发现了这个问题。我认为打电话给

$('#container').html(window.tw);

需要在$ .get成功回调中，而不是在keyup事件函数中 - 因为它是在$ .get返回任何内容之前触发，因此它显示最后一组响应。单个字母搜索不会返回任何结果。

jQuery keyUp / AJAX得到的组合总是落后1或2招

3 个答案: