Tự động hoàn thành giao diện người dùng jQuery: Tham chiếu đến ul

Question

Tôi có 4 hộp văn bản tự động hoàn thành jQuery. Tôi cần thêm một số kiểu vào một danh sách tự động điền cụ thể.

Dấu ul được thêm vào phần thân với lớp ui-autocomplete. Không có liên kết nào có thể cho biết ul nào thuộc về hộp văn bản nào.

Vì vậy, tôi cần phải thêm phong cách cho giao diện người dùng sau khi thành công Ajax hoặc một số tùy chọn mà đi kèm với

$("#srchList").autocomplete(
source: function (request, response) { 
      $.ajax({ ..... 
         success: function (d) { 
         }, 
        ...... 
       }); 
      }, 
open: .... 
select : ..... 
).data('autocomplete')._renderItem = function (liObj, item) { 
    //Position the Autocomplete dropdown. This is not working !!! 
    //$(liObj).parent().css({ 'margin-left': '-18px' }); 

    //Style the dropdown Item. (this works. the li is returned as string to jQuery UI and is added by the jQuery UI to the ul) 
    return $("<li class='dropItem'></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>").html(item.label)) 
      .appendTo(liObj); 
}; 

Có một số tùy chọn như mở:, vị trí phía: vv Nhưng không ai trong số họ có được ul -control cho tôi để áp dụng phong cách css trên nó.

Vui lòng giúp tôi lấy tham chiếu đến ul cho một hộp văn bản cụ thể.

DOM Cấu trúc: Các textbox là ở đâu đó bên trong <form>

Cảm ơn trước.

Answer 1

"các ul được bổ sung vào cơ thể bằng jquery UI. Chúng tôi không thể kiểm soát cấu trúc DOM như là nơi mà các ul được thêm vào. Cập nhật một hình ảnh về cách DOM của tôi là ... - Raghav 5 phút trước "- bạn thực sự có thể ảnh hưởng đến nơi giữ chỗ được chèn bởi Jqueryui:

Sử dụng tùy chọn "appendTo" khi bắt đầu tự động hoàn thành. Có hai div trống, một trong đó các uls "chuẩn" sẽ được thêm vào, một nơi bạn có kiểu ul đặc biệt.

$(".the-standards").autocomplete({ appendTo: "#someStandardDiv" }); 
$(".your-special-autocomplete").autocomplete({ appendTo: "#someSpecialDiv" }); 

và sau đó trong css của bạn, bạn có thể trước khi chỉ định fancyness như

#someSpecialDiv .ui-autocomplete { border: 1px solid red !important }; 

truy cập danh sách đặc biệt của bạn từ jQuery bởi:

$('#someSpecialDiv .ui-autocomplete').css('border', '1px solid red'); 

Answer 2

sao tôi hy vọng tôi đã nhận bạn bây giờ, vì vậy bạn muốn từ bỏ phong cách để mỗi phần tử trong danh sách autocomplete sử dụng dataFilter hoặc formatItem

$("#srchList").autocomplete(
source: function (request, response) { 
    $.ajax({ ..... 
     dataFilter: function(data) { return "<span style='.....'>"+data+"</span>"; }, 
     // or 
     formatItem: function(data) { return "<span style='.....'>"+data+"</span>"; }, 
     //something like this, you can change it as per your requirement. 
     success: function (d) { 
         }, 
        ...... 
       }); 
      }, 
open: .... 
select : ..... 
); 

Answer 3

Bạn có thể thêm lớp CSS cho rằng ul có lớp 'ui-autocomplete' bằng cách sử dụng:

$(elem).autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("whatever"); 

Lớp 'bất cứ điều gì' được áp dụng cho ul. xem dưới đây img:

Answer 4

$("#srchList").autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("your_custom_class"); 

Answer 5

select: function(event, ui) { 
    // that's how get the menu reference: 
    var widget = $(this).data('ui-autocomplete'), 
    menu = widget.menu, 
    $ul = menu.element, 
    id  = $ul.attr('id'); // or $ul[0].id 
}