Utilisation de HTML dans l'autocomplétion de jQuery UI

Question

Avant jQuery UI 1.8.4 Je pourrais utiliser HTML dans le tableau JSON que j'ai construit pour fonctionner avec un autocomplétion.

J'ai pu faire quelque chose comme :

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

Ce texte apparaîtrait en rouge dans le menu déroulant.

Depuis la version 1.8.4, cela ne fonctionne plus. J'ai trouvé http://dev.jqueryui.com/ticket/5275 qui m'indique d'utiliser l'exemple HTML personnalisé aquí avec laquelle je n'ai pas eu de chance.

Comment puis-je faire en sorte que HTML apparaisse dans la suggestion ?

Mon jQuery est :

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

Mon tableau JSON comprend du HTML comme suit :

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Answer 1

Ajoutez ceci à votre code :

).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        };

Votre code devient donc :

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

Nota: Sur les anciennes versions de jQueryUI, utilisez .data("autocomplete")" au lieu de .data("ui-autocomplete")

Answer 2

Ceci est également documenté dans la documentation de l'autocomplétion de jquery-ui à l'adresse suivante : http://api.jqueryui.com/autocomplete/#option-source

L'astuce est la suivante :

1. Utiliser cette extension jQuery UI
2. Ensuite, dans l'option d'autocomplétion, passez autocomplete({ html:true});
3. Maintenant vous pouvez passer html <div>sample</div> dans le champ "label" de la sortie JSON pour l'autocomplétion.

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

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é l'autocomplétion jquery-ui script dans votre page html (ou dans le fichier jquery-ui js). Ajoutez ce plugin script après ce fichier javascript d'autocomplétion.

Answer 3

Cette solution n'est pas recommandée mais vous pouvez éditer le fichier source jquery.ui.autocomplete.js (v1.10.4).

Original :

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Fixe :

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

Answer 4

J'ai eu le même problème, mais je préfère utiliser un tableau statique d'options pour mon option('source') pour des raisons de performance. Si vous essayez cette solution, vous constaterez que jQuery effectue également des recherches sur l'ensemble de l'étiquette.

EG si vous avez fourni :

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

En tapant "span", on obtient les deux résultats. Pour que la recherche ne porte que sur la valeur, il faut remplacer l'option $.ui.autocomplete.filter fonction :

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

Vous pouvez modifier le dernier paramètre c.value à ce que vous voulez, par exemple c.id || c.label || c.value vous permettrait d'effectuer une recherche sur l'étiquette, la valeur ou l'identifiant.

Vous pouvez fournir autant de clés/valeurs que vous le souhaitez au paramètre source de l'autocomplétion.

PS : le paramètre original est c.label||c.value||c .

Answer 5

J'ai rencontré le problème mentionné par Clarence. Je devais fournir HTML pour créer une belle apparence avec des styles et des images. En conséquence, la saisie de "div" correspondait à tous les éléments.

Cependant, ma valeur n'étant qu'un numéro d'identification, je ne pouvais pas permettre à la recherche de se baser uniquement sur ce numéro. J'avais besoin que la recherche porte sur plusieurs valeurs, et pas seulement sur le numéro d'identification.

Ma solution a été d'ajouter un nouveau champ contenant uniquement les valeurs de recherche et de vérifier cela dans le fichier jQuery UI. Voici ce que j'ai fait :

(Ceci est valable pour jQuery UI 1.9.2 ; il se peut qu'il en soit de même pour d'autres versions).

Modifier la fonction de filtrage à la ligne 6008 :

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

J'ai ajouté la vérification du champ "value.searchonly". S'il est présent, il n'utilise que ce champ. S'il n'est pas présent, il fonctionne normalement.

Ensuite, vous utilisez l'autocomplétion exactement comme auparavant, sauf que vous pouvez ajouter la clé "searchonly" à votre objet JSON.

J'espère que cela aidera quelqu'un !