javascript - jQuery 自动完成ajax 请求不更新

Question

我有这个代码来执行 jquery 自动完成:

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

然后我可以发出 ajax 请求并返回新结果:

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

这是页面内的样子:

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

它可以工作，但不像我输入的那样。当我输入某些内容时，我必须将焦点从输入框中移开，然后将焦点重新放在输入框上才能显示结果。我需要它们立即显示(当我输入时)。

Answer 1

因此，类似这样的东西可以让您使用函数作为源，而不是尝试在自动完成后面填充的数组:

$('#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);
                  }
              }
          );
      }
      ....