Bir sayfada jQuery otomatik tamamlamasının birden fazla kopyası

Question

Her sayfada jQuery'nin otomatik tamamlama eklentisinin her örneğini farklı şekilde biçimlendirmek istiyorum. Dışında, her bir örnek için stillerin nasıl farklı olacağını belirleyemem. CSS'den tanımlamak için ac_ * stillerini bir divun içine koyamıyorum. Yaptığım her değişiklik her ikisini de etkiler. Herhangi bir fikir?

Teşekkür ederiz.

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

sonuç gel

, yeni div:

Answer 1

ben size sorun otomatik tamamlama yer tutucu ... Örneğin iç yerleştirilmeyen damla-altındaki listede olduğunu göreceksiniz düşünüyorum sonuçları görüntülemek için sayfaya eklenir - ancak "differentStyle" bölümünüzün içinde değil. Sadece DOM'ın sonuna eklenir. Örneğin:

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

Answer 2

Başka bir şey aramayı oldu:

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

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

belgelerine okumak, o imkansız aynı sayfada iki otomatik tamamlama kutuları için stil geçersiz kılma yapmak olacağını söyleyebilirim Bu gönderiye rastladığımda ... Aşağıdaki otomatik tamamlama olaylarını yakalayarak ve kendi sınıfımı otomatik tamamlama çıktısının bulunduğu dış tarafa ekleyerek bunu yapmayı başardım. Ardından öğeleri gerektiği gibi biçimlendirmek için CSS'yi kullanın. Umarım bu birilerine yardım eder.

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

Örnek css:

Ayrıca

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

benim JSON sonuçlarının bir parçası olarak, ben sadece gerçek bir parçası olarak içinde gömülü sonuçla HTML kabuk (benim JAVA AJAX Eylem itibaren) geri pas JSON "sonuç". Bu şekilde her bir sonucun etrafında ayrıntılı HTML oluşturabilir ve istediğim şekilde biçimlendirmek için yukarıdaki yöntemi kullanabilirim.

Answer 3

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

böyle bir şey ekleyin:

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

Answer 4

Sen _renderMenu yöntemini yeniden yazabilirsiniz. Örnek olarak http://jqueryui.com/demos/autocomplete/#combobox atın.

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

Answer 5

jQuery UI 1.8 kullanıyorsanız, kolayca UL kapsayıcısını alabileceğinizi keşfettim. 1.8 UI kabı kapmak için, sadece açık yönteme aşağıdakileri ekleyin:

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

çözüm çok kolaydır:

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

sınıfa herhangi bir kod koyabilirsiniz .yourClass

Answer 7

Otomatik tamamlama listesini body yerine özel bir kapsayıcıya yerleştirmek için appendTo seçeneğini kullanın. Sonra onu stilleyebilirsin.Örnek:

JS:

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

HTML:

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

CSS: yeni sürümlerinde

#my-suggestions { 
    position: absolute; 
} 

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

Answer 8

"appendTo" için bir üst elemanı seçmek için izin eklendi öneri listesi. Listeleriniz için farklı ebeveynler (içeri veya sınıfla) oluşturabilirsiniz.

Answer 9

Bu sorunu çözdüğümde, jquery-ui her örneğe benzersiz bir kimlik verir, bu # ui-id-1, # ui-id-2, burada dom içindeki ilk otomatik tamamlama numarası 1 olur. , ikinci sayı 2 ve benzeri. Dolayısıyla, otomatik tamamlamaların sırası biliniyorsa, farklı kimliklere farklı stiller uygulanabilir.