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

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

1 个答案: