Как исправить один экземпляр автозаполнения на странице - PullRequest
Новая
       18

Как исправить один экземпляр автозаполнения на странице

0 голосов
/ 09 января 2012

Имея в виду этот пост ( Как установить * только один * экземпляр автозаполнения на странице? )

Я пытаюсь сделать что-то подобное, за исключением того, что я хочу условно переопределить функцию _renderMenu. По сути, я хочу иметь атрибут maxResults, и если количество элементов в списке превышает это значение, я хочу обрезать список до maxResults и добавить сообщение / элемент «Максимальное количество результатов превышено» в качестве последнего элемента в списке. список.

Например: 

var self = this;
$.each( items, function(index, item) {
    var max = maxResults;  // here we define how many results to show

    if (index < max) {
      self._renderItem(ul, item);
    }
    else if (index == max) {
      var message = "<span class='auto-complete-max-results'>" + 
        items.length + " results - Add more characters to refine results" +
        "</span>";

      return $( "<li></li>" )
          .data( "item.autocomplete", item )
          .append( message )
          .appendTo( ul );
    }
  });

Одна из основных проблем, с которыми я сталкиваюсь, заключается в том, как условно переопределить метод и / или если я всегда переопределяю его, могу ли я вызвать суперимпл?

1 Ответ

1 голос
/ 10 января 2012

Вот как я это решил. Во время инициализации поля автозаполнения я делаю следующее: 

$(fieldId).autocomplete({
    ...
  }).data('maxResults', maxResults);

Тогда я делаю это: 

var defaultRenderMenu = $.ui.autocomplete.prototype._renderMenu;

$.ui.autocomplete.prototype._renderMenu = function(ul, items) {

  var autoField = this.element;  
  var max = autoField.data('maxResults');
  var numResults = items.length;

  // if maxResults is defined and the number of results exceeds the max, we want to trim the list
  if (max != null && numResults > max) {
    var self = this;

    $.each( items, function(index, item) {
      // render all items less than the max normally
      if (index < max) {
        self._renderItem(ul, item);
      }
      else if (index == max) {
        var message = "<span class='auto-complete-max-results'>" + 
          "*** " + items.length + " results - Add more characters to refine results ***" +
          "</span>";

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append(message)
            .appendTo(ul);
      }
      else {
        return false;  // break out of loop after max
      }
    });
  }
  // otherwise, use the default implementation of renderMenu
  else {
    defaultRenderMenu.apply(this, [ul, items]);
  }
};
...