web-dev-qa-db-fra.com

Saisie semi-automatique Jquery - HTML personnalisé pour la liste des résultats

Je fais référence à ce plugin: http://jqueryui.com/demos/autocomplete/

La structure d'origine des résultats est donc

<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 les liens à l'intérieur pour ressembler à ceci:

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

S'il vous plaît ne me dites pas la seule solution pour éditer le plugin car je ne veux pas le même format pour tous les autocompletes sur le site.

jqueryjquery-uiautocompletejquery-ui-autocomplete
24
odle

Vous devez remplacer le _renderItem méthode (pour la saisie semi-automatique en 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 que les items dans votre source ont une propriété appelée customattribute)

Comme le montre cet exemple: http://jqueryui.com/demos/autocomplete/#custom-data

40
Andrew Whitaker

Ceci est également documenté dans la documentation de saisie automatique jquery-ui à l'adresse: Jquery-autocomplete .

L'astuce est:

  1. Utilisez cette extension jquery: github Code

  2. Ensuite, dans l'option de saisie semi-automatique, passez

    html:true

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

    );

  3. Vous pouvez maintenant passer du code HTML (comme <div> exemple </div>) dans le champ "label" de la sortie JSON pour la saisie semi-automatique.

Si vous ne savez pas comment ajouter le plugin à JQuery, alors:

  1. Enregistrez le plugin (extension html de Scott González) dans un fichier js ou téléchargez le fichier js.
  2. Vous avez déjà ajouté le script de saisie semi-automatique jquery-ui dans votre page html (ou le fichier js jquery-ui). Ajoutez ce script de plugin après ce fichier javascript à saisie semi-automatique.

Date de publication: 28 juillet 2013

4
Wasiq

Vous pouvez essayer d'ajouter les attributs avec l'événement "open":

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

Vous pouvez utiliser l'événement create pour la saisie semi-automatique pour les versions plus récentes. Comme ça:

create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;
                return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            };
        }

Pour un examen complet du code, j'attache la façon dont j'ai lié la saisie semi-automatique à ma zone de texte.

$('.myTextBox').autocomplete({
        source: function (request, response) {

            // your call to the server
        },
        select: function (event, ui) {
            // when item is selected
            $(this).val(ui.item.label);
        },
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var path = 'basepath' + item.value;

                 return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            };
        }
});
0
Jamshaid Kamran