jQuery自动完成ajax请求不会更新

Question

I have this code to do jquery autocomplete:

var suggestions = [];

function complete(){
    // jQuery Autocomplete
    $('#q').autocomplete({
        source: suggestions,
        select: function(event, ui) {
            window.location = '/play/' + ui.item.display_id;
            event.preventDefault();
        },
        focus: function (event, ui) {event.preventDefault();}
    }).bind('focus', function(){
        if($(this).val().length > 0){
            $(this).autocomplete("search");
        }
    }).autocomplete('instance')._renderItem = function(ul, item){
        return $("<li>").append("<a href='/play/" + item.display_id + "' class='row'>\
                <span class='col-sm-3'><img height=\"50px\" src=\"" + item.icon + "\"></span>\
                <span class='col-sm-9'><p>" + item.title + "</p><p style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.3rem;\">" + item.short_description + "</p></span>\
            </a>")
            .appendTo(ul);
    };
}

I then have this that makes an ajax request and returns new results:

gs.search.suggest($this.val(), function(err, data){
    if(err){return;}
    suggestions = data;
    complete();
});

Here is what it looks like within the page:

var delay = null;
$('#q').on('keypress', function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        search($(this).val());
    }else{
        $this = $(this);
        clearTimeout(delay);
        delay = setTimeout(function() {
            gs.search.suggest($this.val(), function(err, data){
                if(err){return;}
                suggestions = data;
                complete();
            });
        }, 200);
    }
});

It works, but not as I type. When I type something I then have to remove focus from the input box, and focus back on the input box for the results to display. I need them to display right away (as I type).

Answer 1

So, something like this lets you use a function as the source, rather than a array which you try to fill in sort of behind autocomplete's back:

$('#q').autocomplete({
    ...
    source: function(request, response) {
          gs.search.suggest(request,
              function(err, data) {
                  if (err) {
                      /* do something with err condition */
                  } else {
                      /* may need to reformat data here? */
                      response(data);
                  }
              }
          );
      }
      ....