Nhiều trường hợp tự động hoàn thành jQuery trên một trang

Question

Tôi muốn tạo kiểu cho mỗi phiên bản plugin tự động điền của jQuery khác nhau trên mỗi trang. Ngoại trừ tôi không thể tìm ra cách thiết lập các kiểu khác nhau cho từng trường hợp. Tôi có thể không có vẻ để bọc các ac_ * phong cách bên trong một div để xác định chúng từ CSS. Mọi thay đổi tôi thực hiện đều ảnh hưởng đến cả hai. Ý tưởng nào?

Cảm ơn bạn.

Answer 1

Tôi nghĩ rằng bạn sẽ thấy rằng vấn đề của bạn là autocomplete thả dưới danh sách không được đặt bên trong của placeholder của bạn ... Ví dụ:

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div> 

Khi kết quả trở lại, một div mới được thêm vào trang để hiển thị kết quả - nhưng không phải trong bộ phận "differentStyle" của bạn. Nó chỉ được thêm vào cuối DOM. Ví dụ:

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div> 

... 
<div class="ac_results">I get added by jQuery Autocomplete!</div> 
</body> 

Đọc tài liệu hướng dẫn, tôi sẽ nói rằng nó sẽ làm cho trọng phong cách cho hai hộp tự động hoàn tất trên cùng một trang không thể:

http://docs.jquery.com/Plugins/Autocomplete

Answer 2

Được tìm kiếm cái gì khác khi tôi đã xảy ra trên bài đăng này ... Tôi đã quản lý để thực hiện việc này bằng cách bẫy các sự kiện tự động hoàn thành sau đây và thêm lớp của riêng tôi vào bên ngoài có chứa đầu ra tự động hoàn tất. Sau đó sử dụng CSS để định dạng các phần tử nếu cần. Hy vọng điều này sẽ giúp ai đó.

$input.autocomplete({ 
      focus : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
       return false; 
      }, 
      open : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
      }, 

Ví dụ css:

.myClass a.ui-corner-all { font-weight:bold; } 

Cũng như một phần của kết quả JSON của tôi, tôi chỉ đơn giản là vượt qua trở lại (từ JAVA tôi AJAX Action) vỏ HTML với kết quả nhúng trong nó như là một phần của thực tế JSON "kết quả". Bằng cách đó tôi có thể tạo HTML phức tạp xung quanh mỗi kết quả, và sau đó sử dụng phương pháp trên để định dạng chúng theo cách tôi muốn.

Answer 3

http://api.jqueryui.com/autocomplete/#method-widget

thêm một cái gì đó như thế này:

selector.autocomplete("widget").addClass('yourclass'); 

Answer 4

Bạn có thể viết lại phương pháp _renderMenu. Lấy ví dụ http://jqueryui.com/demos/autocomplete/#combobox.

selector.data("autocomplete")._renderMenu=function(ul, items){ 
//do something here.. 
} 

Answer 5

Tôi vừa phát hiện ra rằng bạn có thể dễ dàng lấy container UL nếu bạn đang sử dụng jQuery UI 1.8. Để lấy container UI trong 1.8, bạn chỉ cần thêm dòng sau vào phương pháp mở của bạn:

var $myAcInput = $("#my-acomplete-input"); 

... 
$myAcInput.autocomplete({ 
    open : function(event, ui) { 
    // Grab the widget that just opened: 
    var $resultsContainer = $formsInput.autocomplete("widget"); 
    // Add a custom rendering class and use tht to style your subelements 
    $resultsContainer.addClass("my-custom-results-container-class");    
    // Position the container wherever you want: 
    $resultsContainer.position({at: "center bottom", 
           my:"center top", 
           collision: "fit", 
           of: "#my-acomplete-input"});    
    } 
    source : etc etc etc 
}); 

Answer 6

giải pháp rất đơn giản:

$("#target-input").autocomplete({ 
    open:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').addClass('yourClass'); 
    }, 
    close:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').removeClass('yourClass'); 
    } 
}); 

bạn có thể đặt bất kỳ mã đến lớp .yourClass

Answer 7

Sử dụng tùy chọn appendTo để đặt danh sách tự động hoàn tất vào một số vùng chứa tùy chỉnh thay vì body. Sau đó, bạn có thể tạo kiểu cho nó.Ví dụ:

JS:

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'}) 

HTML:

<input type="text" id="suggestions"> 
<div id="my-suggestions"></div> 

CSS:

#my-suggestions { 
    position: absolute; 
} 

#my-suggestions .ui-autocomplete { 
    foo: bar; 
} 

Answer 8

Trong các phiên bản mới hơn "appendTo" đã được bổ sung, cho phép bạn chọn một yếu tố phụ huynh cho danh sách đề xuất. Bạn có thể tạo các phụ huynh khác nhau (với một hoặc trong lớp) cho danh sách của bạn.

Answer 9

Khi tôi gặp sự cố này, tôi phát hiện ra rằng jquery-ui cung cấp cho mỗi cá thể một id duy nhất, đó là # ui-id-1, # ui-id-2, trong đó tự động hoàn thành đầu tiên trong số nhận được số 1 , số thứ 2 và vân vân. Vì vậy, nếu thứ tự của tự động hoàn thành được biết, các kiểu khác nhau có thể được áp dụng cho các id khác nhau.