jquery autocomplete - tùy chỉnh html cho kết quả niêm yết

Question

tôi đề cập đến plugin này: http://jqueryui.com/demos/autocomplete/

Vì vậy, cấu trúc ban đầu cho kết quả là

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 3</a> 
    </li> 
</ul> 

tôi cần phải thực hiện các liên kết bên trong để trông giống như thế này :

<a class="myclass" customattribute="something"> The item </a> 

Vui lòng không cho tôi biết giải pháp duy nhất để chỉnh sửa plugin vì tôi không muốn định dạng tương tự cho tất cả tự động hoàn thành trên trang web.

Answer 1

Bạn cần phải thay thế các phương pháp _renderItem (đối với autocomplete trong câu hỏi):

$("selector").autocomplete({ ... }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>") 
      .appendTo(ul); 
    }; 

(giả sử items trong bạn source có một tài sản gọi là customattribute)

Như đã trình bày trong ví dụ này: http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

Bạn có thể thử thêm thuộc tính với sự kiện "mở":

$(".selector").autocomplete({ 
    open: function(event, ui) { 
     var jArrEl = $("a.ui-corner-all"); 
     jArrEl.addClass("myclass"); 
     jArrEl.attr("customattribute","something"); 
    } 
}); 

Answer 3

Điều này cũng được ghi trong tài liệu tự động hoàn thành jquery-ui tại: Jquery-autocomplete.

Bí quyết là:

1. Sử dụng phần mở rộng jquery này: github Code

2. Sau đó, trong autocomplete tùy chọn qua

   html:true 
   
   ...autocomplete({ 
   ... 
   html:true 
   ... 
   } 
   

   );

3. Bây giờ bạn có thể vượt qua html (như <div> mẫu </div >) trong lĩnh vực "label" sản lượng JSON cho autocomplete.

Nếu bạn không biết làm thế nào để thêm plugin JQuery thì:

1. Save the plugin (Scott González' mở rộng html) trong một file js hoặc tải file js.
2. Bạn đã thêm tập lệnh tự động hoàn thành jquery-ui vào trang html của mình (hoặc tệp jquery-ui js). Thêm tập lệnh plugin này sau tệp javascript tự động hoàn tất.

Ngày đăng: 28th July, 2013