Невозможно установить свойство '_renderItem' неопределенного автозаполнения jQuery UI с HTML

Question

Я использую следующий код для рендеринга элементов автозаполнения пользовательского интерфейса jQuery в виде HTML.Элементы корректно отображаются в элементе управления автозаполнением, но я продолжаю получать эту ошибку JavaScript и не могу пройти мимо нее.

Firefox Не удалось преобразовать аргумент JavaScript

Chrome Невозможно установить свойство '_renderItem' из неопределенного

  donor.GetFriends(function (response) {
    // setup message to friends search autocomplete
    all_friends = [];
    if (response) {
        for (var i = 0; i < response.all.length - 1; i++) {                
                all_friends.push({
                    "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
                        response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
                        response.all[i].firstname + " " + response.all[i].lastname + "</strong>",

                    "value":response.all[i].firstname + " " + response.all[i].lastname,
                    "id":response.all[i].user_id});
            }
        }        

    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
});

Не уверен, почему он выдает эту ошибку, или что мне нужно сделать, чтобы ее устранить ... Любая помощь приветствуется.

Answer 1

Поскольку я только что присоединился и не могу комментировать пост drcforbin выше, я думаю, что мне нужно добавить свой собственный ответ.

drcforbin правильно, хотя это действительно другая проблема, чем та, что была у ОП.Любой, кто придет в эту ветку сейчас, вероятно, столкнется с этой проблемой из-за только что выпущенной новой версии пользовательского интерфейса jQuery.Некоторые соглашения об именах, относящиеся к автозаполнению, были объявлены устаревшими в пользовательском интерфейсе jQuery в v1.9 и были полностью удалены в v1.10 (см. http://jqueryui.com/upgrade-guide/1.10/#autocomplete).

. Однако сбивает с толку то, что в них упоминается только переход от item.autocomplete тег данных в ui-autocomplete-item , но тег autocomplete также был переименован в ui-autocomplete .И это еще более запутанно, потому что демо-версии все еще используют старый синтаксис (и поэтому не работают).

Далее необходимо изменить функцию _renderItem для jQuery UI 1.10.0 в демонстрационной версии пользовательских данных.: http://jqueryui.com/autocomplete/#custom-data

Исходный код:

.data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Фиксированный код:

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Обратите внимание на изменения для автозаполнение и item.autocomplete . Я убедился, что это работает в моих собственных проектах.

Answer 2

Я столкнулся с той же проблемой ... кажется, в более поздних версиях, это должно быть .data("ui-autocomplete") вместо .data("autocomplete")

Answer 3

Я знаю, что опаздываю с ответом, но если люди в будущем все равно не получат

 .data( "ui-autocomplete-item", item )

на работу, тогда попробуй этот insted

$(document).ready(function(){
 $('#search-id').autocomplete({
  source:"search.php",
  minLength:1,       
  create: function () {
   $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      return $('<li>')
        .append( "<a>" + item.value + ' | ' + item.label + "</a>" )
        .appendTo(ul);
    };
  }
 })
});

Это сработало для меня, и у меня возникли проблемы с функцией входа в систему .. Я не смог войти, потому что он сказал

Uncaught TypeError: Cannot set property '_renderItem' of undefined 

Надеюсь, это кому-нибудь поможет :)

/ Кахин

Answer 4

Я использую jquery 1.10.2, и он работает, используя:

.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

Answer 5

И теперь, с jQuery-2.0.0, это имя вашего нового модуля, но заменяет «.»(точка) через «-» (тире):

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, {
    '_renderMenu': function (ul, items) {
        // some work here
    }
});

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}

Answer 6

Публикация ради любого человека, который натыкается на этот пост.

Эта ошибка также проявится, если вы не поместите .autocomplete в событие готовности документа.

Сбой приведенного ниже кода:

<script type="text/javascript">
    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id of the user to send a message to
            mail_message_to_id = ui.item.id;
        }

    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(item.label))
            .appendTo(ul);
    };
</script>

пока будет работать код ниже:

<script type="text/javascript">
    $(function(){
        $('#msg-to').autocomplete({
            source:all_friends,
            select:function (event, ui) {               
                // set the id of the user to send a message to
                mail_message_to_id = ui.item.id;
            }

        }).data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append($("<a></a>").html(item.label))
                .appendTo(ul);
        };
    });
</script>

Answer 7

В зависимости от используемой вами версии jquery ui, она будет либо «автозаполнение», либо «ui-автозаполнение», я сделал это обновление для плагина combobox, чтобы решить проблему (~ ln 78-85)

var autoComplete = input.data("ui-autocomplete");
if(typeof(autoComplete) == "undefined")
     autoComplete = input.data("autocomplete");

autoComplete._renderItem = function(ul, item) {

...