Utilisation du HTML dans l'autocomplétion de l'interface utilisateur jQuery

Question

Avant jQuery UI 1.8.4 Je pourrais utiliser HTML dans le tableau JSON que j'ai créé 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>'; 

qui apparaîtraient sous forme de texte rouge dans le menu déroulant.

A partir du 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é here avec lequel je n'ai pas eu de chance.

Comment puis-je faire en sorte que le 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 HTML comme ce qui 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> 

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

Answer 2

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é avec cette solution, vous verrez que jQuery recherche aussi sur l'étiquette entière.

EG si vous 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 permet de rechercher sur l'étiquette, la valeur ou l'ID.

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

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

Answer 3

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 était seulement un numéro d'identification, donc je ne pouvais pas permettre à la recherche de se terminer. J'avais besoin de la recherche pour chercher plusieurs valeurs, pas seulement le numéro d'identification.

Ma solution était d'ajouter un nouveau champ qui ne contenait que les valeurs de recherche et de vérifier cela dans le fichier jQuery UI. C'est ce que j'ai fait:

(Ceci est sur jQuery UI 1.9.2; il peut être le 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é le chèque pour le champ « value.searchonly ». Si c'est le cas, il utilise uniquement ce champ. Si ce n'est pas le cas, cela fonctionne normalement.

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

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

Answer 4

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

L'astuce est la suivante:

1. Use this jQuery UI extension
2. Puis dans l'option autocomplete passe autocomplete({ html:true});
3. vous pouvez maintenant passer html <div>sample</div> dans le champ "label" de la sortie JSON pour la saisie semi-automatique.

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

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

Answer 5

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)}, 

fixe:

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