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

61

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

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

Chrome Невозможно установить свойство _renderItem 'из undefined

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

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

  • 0
    Есть ли на странице элемент с идентификатором #msg-to ?
  • 0
    Да, есть ... $ ("# msg-to") - это поле ввода текста, к которому привязан .autocomplete.
Показать ещё 2 комментария
Теги:
jquery-autocomplete

7 ответов

163
Лучший ответ

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

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

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

Ниже приводится описание функции _renderItem для jQuery UI 1.10.0 в демонстрации Custom Data здесь: 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. Я проверял, что это работает в моих собственных проектах.

Поделиться
  • 1
    +1, спасибо. У меня была точная проблема, о которой вы упомянули во втором абзаце. Задача решена!
  • 0
    Отличное объяснение ... искал что-то подробное, как это. Спасибо
Показать ещё 3 комментария
24

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

Поделиться
  • 2
    Я не вижу разницы
  • 2
    Спасибо, это решило проблему для меня
6

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

 .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

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

/Кахин

Поделиться
  • 0
    знак плюс (+) после item.label отсутствует.
  • 0
    @ShafaqatAli Спасибо!
6

Я использую 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 );
};
Поделиться
  • 0
    Спасибо, ваш кусочек кода помог мне после попытки бесконечных вариантов ^^
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) {}
Поделиться
3

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

Эта ошибка также проявится, если вы не поместите .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>
Поделиться
  • 0
    Это сработало для меня в приложении магистрали
  • 0
    это было причиной моего "Не могу установить свойство '_renderItem' неопределенного" внутри спецификации Жасмин
1

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

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

autoComplete._renderItem = function(ul, item) {

...

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню