Không thể đặt thuộc tính '_renderItem' của UI UI không xác định tự động hoàn thành với HTML


67
24
Lý Phương Quang
8 năm trước

Tôi đang sử dụng đoạn mã sau để hiển thị các mục tự động hoàn thành giao diện người dùng jQuery của mình dưới dạng HTML. Các mục hiển thị chính xác trong điều khiển tự động hoàn tất, nhưng tôi tiếp tục gặp lỗi javascript này và không thể di chuyển qua nó.

Firefox không thể chuyển đổi đối số JavaScript

Chrome không thể đặt thuộc tính '_renderItem' không xác định

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

Không chắc chắn tại sao nó lại ném lỗi này, hoặc những gì tôi phải làm để vượt qua nó ... Bất kỳ trợ giúp đều được đánh giá cao.

Hữu ích 67 Yêu thích 24 Chia sẻ Viết bình luận 4
Không hữu ích

Điều này đã giúp: stackoverflow.com/questions/5590776/

Hữu ích 1 · Không hữu ích · Trả lời 0

Có một yếu tố với Id #msg-totrên trang?

Hữu ích 0 · Không hữu ích · Trả lời 0

Có, có ... $ ("# dir-to") là trường nhập văn bản, mà .autocomplete đang ràng buộc.

Hữu ích 0 · Không hữu ích · Trả lời 0

FYI, với bất kỳ ai sử dụng phương thức _renderItem () để tạo ra thứ gì đó KHÁC hơn so với UL ban đầu (tức là TÙY CHỌN), tôi chỉ có thể làm cho nó hoạt động bằng cách trả lại LI (như trên) SAU đối tượng khác được điền.

Hữu ích 0 · Không hữu ích · Trả lời 0

7 Trả lời


189
Hoàng Thục Nhi
7 năm trước

Vì tôi mới tham gia và không thể nhận xét về bài đăng của drcforbin ở trên, tôi đoán tôi phải thêm câu trả lời của riêng mình.

drcforbin là chính xác, mặc dù nó thực sự là một vấn đề khác với vấn đề mà OP đã có. Bất cứ ai đến với chủ đề này bây giờ có lẽ đang phải đối mặt với vấn đề này do phiên bản mới của UI UI vừa được phát hành. Một số quy ước đặt tên nhất định liên quan đến tự động hoàn thành đã không được chấp nhận trong jQuery UI trong v1.9 và đã bị xóa hoàn toàn trong v1.10 (xem http://jqueryui.com/upTHER-guide/1.10/#autocomplete ).

Tuy nhiên, điều khó hiểu là họ chỉ đề cập đến việc chuyển từ thẻ dữ liệu item.autocomplete sang ui-autocomplete-item , nhưng thẻ dữ liệu tự động hoàn thành cũng đã được đổi tên thành ui-autocomplete . Và nó thậm chí còn khó hiểu hơn bởi vì các bản demo vẫn đang sử dụng cú pháp cũ (và do đó bị hỏng).

Sau đây là những gì cần thay đổi trong hàm _renderItem cho jQuery UI 1.10.0 trong bản demo Dữ liệu tùy chỉnh tại đây: http://jqueryui.com/autocomplete/#custom-data

Mã gốc:

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

Mã cố định:

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

Lưu ý các thay đổi cho cả tự động hoàn thànhitem.autocomplete . Tôi đã xác minh rằng điều này hoạt động trong các dự án của riêng tôi.

Hữu ích 189 Trả lời hay nhất Chia sẻ Viết bình luận 5
Không hữu ích

Điều này đã thay đổi một lần nữa ít nhất là với 1.12 bây giờ .autocomplete ("dụ") --- Xem Mới nhất: jqueryui.com/autocomplete/#custom-data )

Hữu ích 2 · Không hữu ích · Trả lời 0

+1, Cảm ơn. Tôi đã có vấn đề chính xác mà bạn đề cập trong đoạn thứ hai của bạn. Vấn đề được giải quyết!

Hữu ích 1 · Không hữu ích · Trả lời 0

Cảm ơn rất nhiều ... câu trả lời của bạn đã cứu tôi rất nhiều đau đớn và đau khổ. :)

Hữu ích 1 · Không hữu ích · Trả lời 0

Giải thích tuyệt vời ... đã tìm kiếm tất cả những gì chi tiết như thế này. Cảm ơn

Hữu ích 0 · Không hữu ích · Trả lời 0

Giải pháp tuyệt vời. Hoàn toàn làm việc cho tôi!

Hữu ích 0 · Không hữu ích · Trả lời 0

25
Lý Bảo Hà
7 năm trước

Tôi gặp vấn đề tương tự ... dường như trong các phiên bản sau, nó phải .data("ui-autocomplete")thay thế.data("autocomplete")

Hữu ích 25 Chia sẻ Viết bình luận 2
Không hữu ích

Tôi không thấy sự khác biệt

Hữu ích 2 · Không hữu ích · Trả lời 0

Cảm ơn, điều này đã giải quyết vấn đề cho tôi

Hữu ích 2 · Không hữu ích · Trả lời 0

8
Võ Huy Kiên
6 năm trước

Tôi biết tôi đến trễ với câu trả lời của mình nhưng nếu mọi người trong tương lai vẫn không nhận được

 .data ("ui-autocomplete-item", mục)

để làm việc sau đó thử insted này

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

Nó hoạt động với tôi và tôi gặp vấn đề với funktion đăng nhập .. Tôi không thể đăng nhập vì nó nói

Uncaught TypeError: Không thể đặt thuộc tính '_renderItem' không xác định 

Hy vọng điều này sẽ giúp được ai đó :)

/ kahin

Hữu ích 8 Chia sẻ Viết bình luận 2
Không hữu ích

một dấu cộng (+) sau khi item.label bị thiếu.

Hữu ích 0 · Không hữu ích · Trả lời 0

@ShafaqatAli Cảm ơn bạn!

Hữu ích 0 · Không hữu ích · Trả lời 0

6
Ngô Ái Linh
7 năm trước

Tôi đang sử dụng jquery 1.10.2 và nó hoạt động bằng cách sử dụng:

.data( "custom-catcomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};
Hữu ích 6 Chia sẻ Viết bình luận 1
Không hữu ích

Cảm ơn bạn, bit code của bạn đã giúp tôi sau khi thử các tùy chọn vô tận ^^

Hữu ích 0 · Không hữu ích · Trả lời 0

5
Hồ Phương Quỳnh
7 năm trước

Và bây giờ, với jQuery-2.0.0, đó là tên của mô-đun mới của bạn, nhưng thay thế "." (dấu chấm) bởi dấu "-" (dấu gạch ngang):

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

$this.catcomplete({
    // options
}).data('custom-catcomplete')._renderItem = function (ul, item) {}
Hữu ích 5 Chia sẻ Viết bình luận 0
Không hữu ích

3
Vũ Sỹ Hoàng
7 năm trước

Đăng bài vì lợi ích của bất kỳ ai tình cờ thấy bài này.

Lỗi này cũng sẽ tự biểu hiện nếu bạn không đặt .autocomplete bên trong sự kiện sẵn sàng cho tài liệu.

Mã dưới đây sẽ thất bại:

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

trong khi mã dưới đây sẽ hoạt động:

<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>
Hữu ích 3 Chia sẻ Viết bình luận 2
Không hữu ích

Điều này làm việc cho tôi trong một ứng dụng xương sống

Hữu ích 0 · Không hữu ích · Trả lời 0

đây là nguyên nhân của "tài sản không thể thiết lập '_renderItem' của tôi không xác định" bên trong một thông số Jasmine

Hữu ích 0 · Không hữu ích · Trả lời 0

1
Đỗ Quốc Thành
7 năm trước

Tùy thuộc vào phiên bản jquery ui bạn đang sử dụng, nó sẽ là "tự động hoàn thành" hoặc "ui-autocomplete", tôi đã thực hiện cập nhật này cho plugin combobox để khắc phục sự cố (~ ln 78-85)

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

autoComplete._renderItem = function(ul, item) {

...

Hữu ích 1 Chia sẻ Viết bình luận 0
Không hữu ích

Trả lời của bạn

Xem trước nội dung