jQuery otomatik tamamlama - Bu eklenti bahsediyorum

Question

listeleme sonucu için özel html: http://jqueryui.com/demos/autocomplete/

Yani sonuç için özgün yapısı böyle bir şey bakmak için içeri bağlantıları yapmak gerekir

<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> 

olduğunu :

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

i sitedeki tüm tamamlar için aynı biçimi istemiyoruz çünkü eklenti düzenlemek için bana tek çözüm söyleme lütfen.

Answer 1

Sen (Söz konusu otomatik tamamlanması için) _renderItem yöntemini değiştirmeniz gerekir:

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

(varsayarsak source var customattribute denilen bir özellik içinde items) Bu örnekte de görüldüğü gibi

: http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

Nitelikleri "açık" etkinliğiyle eklemeyi deneyebilirsiniz:

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

Answer 3

Bu, jquery-ui otomatik tamamlama belgelerinde de belgelenmiştir: Jquery-autocomplete.

hiledir:

1. bunu kullanın jquery uzantısı: github Code

2. Sonra otomatik tamamlama seçeneği geçişte

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

   );

3. Şimdi otomatik tamamlanması için JSON çıktı "etiketi" alanına html (gibi <div> örnek </div >) geçirebilir.

sonra JQuery için eklenti nasıl ekleneceğini bilmiyorsanız

: Bir js dosyasında

1. kaydet eklentisi (Scott González' html uzantısı) veya js dosyasını indirin.
2. Daha önce jquery-ui otomatik tamamlama komut dosyasını html sayfanıza (veya jquery-ui js dosyasına) eklediniz. Bu tamamlama komut dosyasını bu otomatik tamamlama javascript dosyasından sonra ekleyin.

Gönderi tarihi: 28 Temmuz 2013