jQuery Girl
  1. jQuery Girl
  3. Filtrer Jquery AutoComplete par plusieurs valeurs d’un tableau d’objects
Intereting Posts
Changer la position de fond de: avant le sélecteur CSS avec JQuery Insérer une bannière div après 5 éléments en utilisant Javascript Pas de chargement de Google Maps dans iframe Comment créez-vous des événements de liaison jQuery avec des éléments chargés via Ajax? erreur jqgrid – b.jgrid.jqID n’est pas une fonction QueryDict toujours vide d’AJAX POST jQuery – Récupère les en-têtes de réponse AJAX Datepicker dates du mois précédent / suivant sélectionnables asp.net comment enregistrer la case à cocher satus lorsque le panneau de mise à jour fonctionne? problème de largeur d’échelle iframe Obtenir la position de l’élément par rapport au sumt de la fenêtre Le délai de popover au démarrage ne fonctionne pas Jquery – Lire toutes les classes d’un div Comment sous-classer TextCellEditor of Slickgrid? Enregistrer un champ de texte généré dynamicment à partir de PHP

Filtrer Jquery AutoComplete par plusieurs valeurs d’un tableau d’objects

Je souhaite configurer le plug-in autocomplete pour ne sélectionner que les employés valides de la liste. J’ai un tableau d’objects Employee, ayant EmployeeID et EmployeeName. Actuellement, j’ai chargé la saisie semi-automatique pour EmployeeName en copiant tout le nom EmployeeName de l’employé dans un tableau et en l’envoyant pour configurer le plug-in autocomplete. 

var employeeNames = new Array(); for (var i = 0 ; i < employees.length ; i++) { employeeNames[a] = employees.Employee[a].Name; } $("#txtEmployeeName").autocomplete(employeeNames, { multiple: true, mustMatch: true, autoFill: true });

Cela fera le travail, mais CE QUE JE VEUX, si l’utilisateur veut entrer EmployeeID dans cette zone de texte, il charge également le filtrage des suggestions sur EmployeeID, même s’il affiche les EmployeeNames dans les suggestions. Y at-il un moyen de mettre cela en œuvre, je me rappelle que je l’ai vu quelque part mais je ne me souviens pas du site Web.

jQueryUI nécessite une valeur et / ou un champ d’étiquette si vous utilisez un object:

Plusieurs types supportés:

Tableau : un tableau peut être utilisé pour les données locales. Il existe deux formats pris en charge: Un tableau de chaînes: [“Choice1”, “Choice2”]

Un tableau d’objects avec les propriétés label et value: [{label: “Choice1”, valeur: “value1”}, …] La propriété label est affichée dans le menu de suggestion. La valeur sera insérée dans l’élément d’entrée lorsqu’un utilisateur sélectionne un élément. Si une seule propriété est spécifiée, elle sera utilisée pour les deux. Par exemple, si vous ne fournissez que des propriétés de valeur, la valeur sera également utilisée en tant qu’étiquette.

Source: http://api.jqueryui.com/autocomplete/#option-source

Dans cet esprit, vous devez adopter vos données, y compris la propriété value, que vous venez d’affecter au nom (par exemple, $.each(employees, function(){ this.value = this.name }); …)

L’autre chose que vous devez définir est la façon dont vous souhaitez filtrer. Cela peut être fait en définissant la source .

Exemple: 

  $("#txtEmployeeName").autocomplete({ source: function (request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); var matching = $.grep(employees, function (value) { var name = value.value; var id = value.id; return matcher.test(name) || matcher.test(id); }); response(matching); } });

Exemple de violoniste : http://fiddle.jshell.net/YJkTr/

Code complet: 

     Demo