Tùy chỉnh hiển thị tự động hoàn thành trong giao diện người dùng jQuery 1.8

Question

Tôi đang cố gắng tùy chỉnh giao diện của các thành phần tự động hoàn thành trong JQuery 1.8. tôi sử dụng ví dụ từ JQuery UI website

$('#term').autocomplete(
    {source:'index.php?/Ajax/SearchUsers', minLength: 3, delay: 300} 
).data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
      .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
      .appendTo(ul); 
}; 

Đáng tiếc là trong JQuery UI 1.8 không có trường dữ liệu ui-autocomplete. Tôi có thể sửa đổi mẫu để tự động hoàn thành trong Giao diện người dùng JQuery 1.8 ở đâu?

Answer 1

Ví dụ trong trang web giao diện người dùng jQuery dựa trên jQuery UI 1.10, jQuery UI 1.8 có một chút khác biệt, do đó bạn phải thay đổi mã để cho phép nó hoạt động.

Sự khác biệt chính là ở đây:

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

Các data("ui-autocomplete") phải data("autocomplete") và bạn phải thiết lập các thuộc tính data để thêm thông tin bổ sung của bạn vào autocomplete.

Code:

$("#project").autocomplete({ 
    minLength: 0, 
    source: projects, 
    focus: function (event, ui) { 
     $("#project").val(ui.item.label); 
     return false; 
    }, 
    select: function (event, ui) { 
     $("#project").val(ui.item.label); 
     $("#project-id").val(ui.item.value); 
     $("#project-description").html(ui.item.desc); 
     $("#project-icon").attr("src", "images/" + ui.item.icon); 

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

Demo: http://jsfiddle.net/IrvinDominin/zvGKw/

Answer 2

Trong chức năng đang mở, bạn có thể sử dụng css để thay đổi giao diện của gợi ý của bạn như thế này:

open: function() { 
    $('.ui-autocomplete').width('auto'); 
    $('.ui-widget-content').css('background', '#E1F7DE'); 
    $('.ui-menu-item a').removeClass('customClass'); 
} 

như vậy trong trường hợp của bạn nó nên như thế này

$('#term').autocomplete(
    { 
     source:'index.php?/Ajax/SearchUsers', 
     minLength: 3, 
     delay: 300, 
     open: function() { 
      $('.ui-autocomplete').width('auto'); 
      $('.ui-widget-content').css('background', '#E1F7DE'); 
      $('.ui-menu-item a').removeClass('ui-corner-all'); 
     } 

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

Answer 3

Tôi đã có để thực hiện một plugin/widget mà sử dụng Autocomplete và chạy vào cùng một vấn đề. Tôi đã điều tra $ (...). Data() mà ofcourse tiết lộ rằng các phiên bản khác nhau của dữ liệu lưu trữ jQuery UI trong .data() với các khóa khác nhau.

Theo Hướng dẫn nâng cấp cho 1,9 (http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys)

Autocomplete bây giờ sử dụng ui-autocomplete mục thay vì item.autocomplete ... Một số trong số này là hoàn toàn nội bộ, và một số là hữu ích cho người dùng. Những cái hữu ích cho người dùng, đặc biệt là các cá thể widget và các mục tự động hoàn thành, vẫn hỗ trợ các tên cũ, mặc dù chúng không được dùng nữa.

Vì vậy, khi tôi đã phải "đè" các _renderItem-extensionpoint, liên quan đến giao diện người dùng phiên bản với, đây là những gì tôi đã làm:

if ($input.data("autocomplete") !== undefined) { 
    $input.data("autocomplete")._renderItem = options._renderItem; 
} else ($input.data("ui-autocomplete") !== undefined) { 
    $input.data("ui-autocomplete")._renderItem = options._renderItem; 
} else { 
    // fail fast, fail here! 
} 

Đây là càng gần như tôi có thể nhận được để feature- phát hiện.