En utilisant HTML dans autocomplete jQuery UI

Question

Avant jQuery UI 1.8.4 je pourrais utiliser HTML dans le tableau JSON I conçu pour fonctionner avec une saisie semi-automatique.

j'ai pu faire quelque chose comme:

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

Cela apparaîtrait sous forme de texte rouge dans le bas de baisse.

Au 1.8.4 qui ne fonctionne pas. J'ai trouvé http://dev.jqueryui.com/ticket/5275 qui me dit d'utiliser la coutume HTML exemple que j'ai pas eu de chance avec.

Comment puis-je obtenir HTML pour apparaître 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>

array Mon JSON comprend HTML comme suit:

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

Answer 1

Ajouter à votre code:

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

Alors votre code devient:

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

Remarque: Sur les anciennes versions de jQueryUI utilisation .data("autocomplete")" au lieu de .data("ui-autocomplete")

Answer 2

Ceci est également documenté dans la documentation autocomplete jquery-ui à: http://api.jqueryui.com/autocomplete/#option-source

L'astuce est la suivante:

1. Utilisez cette extension jQuery UI
2. Puis, en autocomplete autocomplete({ html:true}); passe option
3. Vous pouvez maintenant passer html <div>sample</div> dans le domaine de la production JSON pour autocomplete "label".

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

1. Enregistrer le plug-in (Scott González » extension html) dans un fichier js ou télécharger le fichier js.
2. Vous avez déjà ajouté le script autocomplete jquery-ui dans votre page html (ou le fichier du jquery-ui). Ajouter ce script plugin après ce fichier javascript autocomplete.

Answer 3

Cette solution est recommandée, mais vous pouvez simplement modifier jquery.ui.autocomplete.js fichier source (v1.10.4)

Original:

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

Correction:

_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 la performance. Si vous avez essayé cette solution, vous trouverez que les recherches sur jQuery toute l'étiquette aussi.

Par exemple, si vous avez fourni:

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

puis en tapant « span » correspondrait à la fois les résultats, pour l'obtenir à la recherche sur la valeur que remplacer la fonction $.ui.autocomplete.filter:

$.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 à tout ce que vous voulez, par exemple c.id || c.label || c.value vous permettra de rechercher sur l'étiquette, la valeur ou l'identifiant.

Vous pouvez fournir autant de clés / valeurs au paramètre source de saisie semi-automatique que vous voulez.

PS:. Le paramètre d'origine est c.label||c.value||c

Answer 5

J'ai eu la question mentionnée par Clarence. Je devais fournir HTML pour faire une apparition agréable avec des styles et des images. Cela a donné lieu à la saisie « div » correspondant à tous les éléments.

Cependant, ma valeur est seulement un numéro d'identification, donc je ne pouvais pas permettre à la recherche de courir hors de tout cela. Je avais besoin de recherche pour trouver plusieurs valeurs, non seulement le numéro d'identification.

Ma solution a été d'ajouter un nouveau champ qui ne détenait plus que les valeurs de recherche et vérifier que dans le fichier jQuery UI. Voilà ce que je l'ai fait:

(Ceci est sur jQuery UI 1.9.2;. Il peut être la même sur les autres)

Modifier la fonction de filtre sur 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'ajouté le chèque pour le champ « value.searchonly ». Si elle est là, il utilise seulement ce domaine. Si ce n'est pas là, il fonctionne normalement.

Ensuite, vous utilisez la saisie semi-automatique exactement comme avant, sauf que vous pouvez ajouter la touche « searchonly » à votre objet JSON.

J'espère que quelqu'un aide!