Comment utiliser JQuery Autocomplete pour plusieurs mots
-
05-07-2019 - |
Question
J'ai un champ autocomplete et je me demande comment puis-je l'utiliser pour plusieurs mots? Quand je tape le premier mot, cela fonctionne parfaitement, mais quand j'espace et tape le deuxième mot, il renvoie les deux mots sur le serveur et bien sûr, les résultats sont faux!
par exemple. quand je tape les deux mots,
'Java javascript'
le premier mot 'Java', l'auto-complétion fonctionne bien, tirez la liste.
mais quand j’espace et tape javascript, autocomplete envoie 'Java + javascript 'à ma fonction ajax.
Des idées pour résoudre ce problème?
La solution
On dirait que vous ne pouvez pas, l’implémentation intégrée ne le prend pas en charge - vous pouvez voir dans le lien ci-dessus: "ne fait pas partie de la version ou de la distribution stable".
Cependant, j'ai téléchargé et utilisé la version externe, disponible ici :
http://bassistance.de/jquery-plugins/jquery-plugin- autocomplete /
c'est un peu plus gros, mais l'utilisation est exactement la même, vous n'avez rien à changer, pour une sélection multiple, ajoutez aux options {multiple: true}
Mettre à jour
JQueryUI a été mis à jour pour les versions les plus récentes, rendant cette réponse obsolète. Vous trouverez un exemple actualisé ici
Autres conseils
Si vous utilisez la " bassistance " Si vous utilisez la version de jQuery UI, voici un exemple:
$("#tagnames").autocomplete("/tags/filter", {
max: 6,
highlightItem: true,
multiple: true,
multipleSeparator: " ",
})
Pour activer la saisie automatique pour plusieurs mots, vous devez définir les options multiple: true et multipleSeparator: " "
En ajoutant un commentaire pour une réponse plus complète, supposons que vous avez deux sélections possibles avec un préfixe commun:
ip5 , batterie ip5
si l'utilisateur tape dans la zone de texte ip5, la première sélection ci-dessus sera automatiquement choisie sans permettre à l'utilisateur de continuer à taper pour la deuxième sélection. Pour éviter ce problème, assurez-vous d'utiliser l'option
.triggerSelectOnValidInput: true,