web-dev-qa-db-fra.com

Utilisation de HTML dans la saisie semi-automatique de l'interface utilisateur jQuery

Avant jQuery UI 1.8.4 Je pouvais utiliser HTML dans le tableau JSON que j'ai construit 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îtra sous forme de texte rouge dans la liste déroulante.

Depuis la version 1.8.4, cela ne fonctionne pas. J'ai trouvé http://dev.jqueryui.com/ticket/5275 qui me dit d'utiliser l'exemple HTML personnalisé ici avec lequel je n'ai pas eu de chance.

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

Ma 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 inclut du HTML comme suit:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
htmljquery-uiautocompletejquery-ui-autocomplete
82
Jason

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>

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

116
Kieran Andrews

Ceci est également documenté dans la documentation de saisie semi-automatique jquery-ui sur: http://api.jqueryui.com/autocomplete/#option-source

L'astuce est:

  1. tilisez cette extension jQuery UI
  2. Ensuite, dans l'option de saisie semi-automatique, passez autocomplete({ html:true});
  3. Vous pouvez maintenant passer html &lt;div&gt;sample&lt;/div&gt; dans le champ "label" de la sortie JSON pour la saisie semi-automatique.

Si vous ne savez pas comment ajouter le plugin à l'interface utilisateur 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.
10
Wasiq

Cette solution n'est pas recommandée mais vous pouvez simplement é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)},

Fixé:

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

J'ai eu le même problème, mais je préfère utiliser un tableau statique d'options pour mon option ("source") pour les performances. Si vous avez essayé avec cette solution, vous constaterez que jQuery recherche également sur l'intégralité de l'étiquette.

EG si vous avez fourni:

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

Ensuite, taper "span" correspondrait aux deux résultats, pour que la recherche sur la valeur ne remplace que $.ui.autocomplete.filter une 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 à tout ce que vous voulez, par exemple c.id || c.label || c.value vous permettrait de rechercher sur l'étiquette, la valeur ou l'ID.

Vous pouvez fournir autant de clés/valeurs que vous le souhaitez pour le paramètre source de la saisie semi-automatique.

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

0
Clarence Liu

J'ai eu le problème mentionné par Clarence. Je devais fournir HTML pour faire une belle apparence avec des styles et des images. Cela a entraîné la saisie de "div" correspondant à tous les éléments.

Cependant, ma valeur n'était qu'un numéro d'identification, donc je ne pouvais pas autoriser la recherche à partir de cela. J'avais besoin de la recherche pour rechercher plusieurs valeurs, pas seulement 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. C'est ce que j'ai fait:

(C'est sur jQuery UI 1.9.2; il peut en être de 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'ai ajouté la vérification du champ "value.searchonly". S'il est là, il utilise uniquement ce champ. S'il n'est pas là, cela fonctionne normalement.

Ensuite, vous utilisez la saisie semi-automatique exactement comme avant, sauf que vous pouvez ajouter la clé "searchonly" à votre objet JSON.

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

0
Ricketts