Невозможно установить свойство "_renderItem" из undefined jQuery UI autocomplete с HTML

Ответ 1

Так как я только что присоединился и не могу комментировать пост 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. Я проверял, что это работает в моих собственных проектах.

Ответ 2

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

Ответ 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 

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

/Кахин

Ответ 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 );
};

Ответ 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) {}

Ответ 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>

Ответ 7

В зависимости от версии 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) {

...

Ответ 8

Кто-нибудь скажет мне? Я попытался заменить "ui-autocomplete" и "autocomplete". Различные версии пользовательского интерфейса загружены. Ошибка не исчезает. "Невозможно установить свойство _renderItem из неопределенного"

$inputAutocomplete.autocomplete({
        minLength: minLength,
        appendTo: $('#autocomplete-result-' + thisId),
        source: function (request, response) {
            var term = request.term;

            if (term in window['cache_' + id]) {
                response(window['cache_' + id] [term]);
                return;
            }
            $.getJSON(url, request, function (data, status, xhr) {
                window['cache_' + id] [term] = data;
                response(data);
            });
        },
        position: {
            offset: '0 0'
        },
        search: function () {
            $(this).addClass('search')
        },
        response: function(data, ui){
            $(this).removeClass('search');
        },
        open: function () {

            $(this).removeClass('search');

            $('.ui-autocomplete:visible').addClass('show');

            $(document).on('click', function () {
                $('.ui-autocomplete:visible').removeClass('show');
            });
        },
        close: function (event, ui) {
            $('.ui-autocomplete:hidden').removeClass('show');
            $(this).removeClass('search');
        },
        select: function (event, ui) {
            $('.ui-autocomplete:visible').removeClass('show');
            $input.val(ui.item.id);
            $input.change();

            if ($input.closest('.form-group').hasClass('has-error')){
                var $inputWrapper = $input.closest('.form-group');
                $inputWrapper.removeClass('has-error')
                    .find('.help-block').text('').hide();
                $inputWrapper.find('.hint-block').show();
            }

            callback(event, ui);
        }
    })
    .focus(function(){
        $(this).data("ui-autocomplete").search($(this).val());
    }).data( "ui-autocomplete" )._renderItem = function (ul, item) {
            var labelDesc = '';
            if (item.desc){
                labelDesc = '<div class="label-desc">' + item.desc + '</div>';
            }
            return $("<li></li>")
                .data("ui-autocomplete-item", item)
                .append("<a>" + item.label + labelDesc + "</a>")
                .appendTo(ul);
    };