Jquery autocomplete-custom html pour la liste des résultats
donc la structure originale pour les résultats est
<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>
j'ai besoin de faire des liens à l'intérieur de ressembler à quelque chose comme ceci:
<a class="myclass" customattribute="something"> The item </a>
s'il vous Plaît ne me dites pas la seule solution pour modifier le plugin parce que je ne veux pas le même format pour tous les auto-complété sur le site.
3 réponses
Vous devez remplacer le _renderItem méthode (pour la saisie semi-automatique dans la question):
$("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 );
};
(en supposant le items dans votre source ont une propriété appelée customattribute)
Comme indiqué dans cet exemple: http://jqueryui.com/demos/autocomplete/#custom-data
Ceci est également documenté dans la documentation de jQuery-ui autocomplete à: Jquery-autocomplete.
Le truc, c'est:
- utilisez cette extension jquery:github
puis en autocomplete option pass
html:true ...autocomplete({ ... html:true ... });
Maintenant vous pouvez passer html (comme
sample) dans le champ "label" de la sortie JSON pour autocomplete.
Si vous ne connaissez pas comment ajouter le plugin à JQuery puis:
- Enregistrer le plugin (extension html de Scott González) dans un fichier js ou télécharger le fichier js.
- vous avez déjà ajouté le script jQuery-ui autocomplete dans votre page html(ou le fichier jquery-ui js). Ajoutez ce script de plugin après que le fichier javascript autocomplete.
Date de publication: 28 juillet 2013
Vous pourriez essayer d'ajouter les attributs de l'événement "open":
$( ".selector" ).autocomplete({
open: function(event, ui) {
var jArrEl = $("a.ui-corner-all");
jArrEl.addClass("myclass");
jArrEl.attr("customattribute","something");
}
});