Не могу установить renderItem свойство неопределенного помощью jQuery автозаполнения пользовательского интерфейса с HTML

Я использую следующий код для отображения моих элементов автозаполнения 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);
    };
});

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

7 64
javascript jquery jquery-ui-sortable jquery-autocomplete

7 ответов:

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

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

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

в следующее, что нужно изменить в функции _renderItem для пользовательского интерфейса jQuery 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 );
};

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

178

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

25

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

 .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

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

/ kahin

7

Я использую 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 );
};
6

и теперь, с 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) {}
5

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

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

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

<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>
3

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

...

1