Question

I built a very simple Twitter Instant Search for fun, using jQuery and PHP. I bind an event to keyup on the search form, and make a quick AJAX call to a PHP page that curls Twitter Search JSON.

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

Even though the console.log value returned is right, it still falls behind 1-2 characters, in terms of the results it displays. Why? How can I fix this?

Answer 1

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

This should be inside the callback given to $.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);    
        });

    });
});