Функция _render в Jquery-UI не работает при автозаполнении

Question

Я пытаюсь использовать функцию автозаполнения в Jquery-UI. Бэкэнд, кажется, работает. Он печатает правильные объекты и возвращает правильный объект json, однако функция _render не запускается.

Javascript:

var app = window.app = {};
app.Problems = function() {
  this._input = $('#problems-search-txt');
  this._initAutocomplete();
};

app.Problems.prototype = {
  _initAutocomplete: function() {
    this._input
      .autocomplete({
        source: '/search_for_problems',
        appendTo: '#problems-search-results',
        select: $.proxy(this._select, this)
      })
      .autocomplete('instance')._renderItem = $.proxy(this._render, this);
  },

  _render: function(ul, item) {
    var markup = ['<span class="name">' + item.name + '</span>'];
    console.log("trying to render");
    return $('<li>').append(markup.join('')).appendTo(ul);
  },

  _select: function(e, ui) {
    this._input.val(ui.item.name);
    return false;
  }
};

HTML:

  <div class="problems-search">
    <input type="text" id="problems-search-txt" autofocus>
    <div class="results" id="problems-search-results"></div>
  </div>

  <script>
     new app.Problems;
  </script>

Рубин на рельсах

Класс Задачи Controller

  def search_for_problems
    @problems = Problem.search(params[:term])

    logger.debug "there are #{@problems.count} problems with the term"
    @problems.each do |problem|
      logger.debug problem.name
    end
      respond_to do |format|
        format.html
        format.json { @problems = Problem.search(params[:term]) }
      end
  end
end

JBuilder:

json.array!(@problems) do |problem|
  json.name problem.name
end

Почему функция _render не работает?

Answer 1

У меня была та же проблема, что и у вас, с точно таким же кодом (может быть, мы нашли тот же учебник...)

Я должен был изменить линию

.autocomplete('instance')._renderItem = $.proxy(this._render, this);

в

.autocomplete().data("ui-Autocomplete")._renderItem = $.proxy(this._render, this);

Это должно работать, если вы используете последнюю версию пользовательского интерфейса jQuery (1.10+)

Answer 2

Я попробовал ваш код, и он отлично работает. Имейте в виду, что _renderItem Метод сработает только тогда, когда вы попытаетесь ввести что-то во ввод, и соответствующее значение (или значения) будет найдено в списке значений. Другими словами, вы _render Метод будет вызываться только тогда, когда элемент управления показывает раскрывающийся список значений источника.