Apprenez à créer des formulaires avec une liste de suggestions dès que l’utilisateur tape les premières lettres de sa recherche.
jQuery UI fournit un widget pour créer ce type de formulaire.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez rapidement des formulaires auto suggest avec le Framework jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours dédié à l’extension jQuery UI vous allez apprendre à créer des formulaires auto-suggest, vous connaissez tous le moteur de recherche Google, quand vous commencez à taper les premières lettres d’un mot, il vous propose toute une liste de suggestion. jQuery UI vous permet de faire la même chose d’une façon très simple et très rapide.
Les formulaires auto-suggest
Vous allez pouvoir implémenter vos propres formulaires auto-suggestion, les données de la liste peuvent venir via Ajax, par un fichier XML, un fichier PHP, un fichier HTML, comme vous voulez ou hébergé dans votre document HTML lui-même, donc il suffit d’utiliser une balise input et avec jQuery UI l’associer à la méthode autocomplete pour créer, moi j’appelle ça un formulaire auto-suggest.
Vous avez tout un tas d’options, appendTo, autoFocus, delay, disabled, je vous laisse regarder sur la vidéo, la mettre en pause, c’est de l’HD, vous pourrez lire facilement en plein écran, il n’y a pas de problèmes.
minLength c’est la position pour définir la position de votre liste de suggestions, vous avez votre champ input et la position vous pouvez la définir ou vous voulez,
source comme je vous l’ai dit la source de données ça peut venir d’un tableau, d’un fichier XML, d’une URL, tout ce que vous voulez en fait, il n’y a pas trop de limites.
Les méthodes – les formulaires auto-suggest
Vous avez des méthodes, close pour fermer la liste de suggestion, destroy pour la supprimer, disable pour la désactiver, enable pour l’activer, vous pouvez définir des options sur votre liste de suggestions, search c’est pour déclencher une recherche dans les données de la liste de suggestions en fonction du terme fourni, c’est en fonction des lettres de l’utilisateur, vous déclenchez la méthode search en passant les lettres que l’utilisateur à tapées, et il va faire le tri, le filtre automatique dans la liste de suggestions pour afficher uniquement les termes qui correspondent à la saisie de l’utilisateur. Widget ça vous renvoie un objet jQuery.
Les événements – formulaires auto-suggest
Vous avez des événements, change ce déclenche lorsque la liste de sélection a été changée, une sorte de survole, close lorsque le menu est fermé, create la liste de suggestion est créée, focus lorsque le focus est donné à un item sur la liste de suggestions.
Open, c’est un événement qui se déclenche lorsque la liste de suggestion est ouverte, response c’est lorsque une recherche est effectuée avant que le menu s’affiche, search se déclenche avant que la recherche elle-même soit effectuée, l’utilisateur tape sur le clavier, ça va lancer l’événement search et effectuer une recherche, là l’évènement se déclenche avant la recherche, select lorsque l’utilisateur a sélectionné un élément de la liste.
Les formulaires auto-suggest
Vous avez tout un tas d’événements qui vont vous aider à rajouter des actions supplémentaires en fonction de l’utilisateur, de ce qu’il choisit, vous pouvez définir le nombre de lettres minimum que l’utilisateur doit écrire avant d’afficher la liste de suggestions, si vous mettez à zéro vous pouvez choisir d’afficher la liste de suggestions dès qu’il clique sur le champ input, vous affichez la liste de suggestions, et au fur et à mesure qu’il tape, la liste se réduit d’elle-même. Vous pouvez bien évidemment, classer automatiquement la liste de suggestions avec un classement alphabétique, je vous ai préparé le script, vous aurez tout ça dans le code source à télécharger à la fin de ce cours, vous pouvez positionner la liste de suggestions où vous voulez par rapport au champ input, et vous pouvez choisir d’afficher la liste de suggestion dès l’affichage de la page avec autocomplete et search à 0, l’utilisateur n’aura pas le temps de taper dans le champ input.
Vous pouvez afficher la liste de suggestions dès le focus de l’utilisateur, dès qu’il clique dans le champ input, vous pouvez définir la hauteur, la largeur de la liste de suggestions avec une classe CSS, autocomplete, max-height, overflow-y pour faire apparaitre une barre de défilement sur la liste de suggestions plutôt que d’avoir une liste à rallonge, vous faites une barre de défilement. Vous pouvez aussi fixer la largeur la largeur de la liste de suggestion, vous pouvez vraiment faire énormément de choses, jQuery UI laisse une grande liberté à l’utilisateur, pour justement, personnaliser les éléments qu’il utilise, comme je vous l’ai dit, la source de la liste de suggestions peut provenir de PHP, JSON, XML, HTML. Vous pouvez ajouter des animations sur la liste de suggestions, comme d’habitude, et elle supporte les événements et bien évidemment pensez à personnaliser votre liste de suggestion dans votre thème avec themeroller de jQuery UI, très facile d’utilisation
Exemple de formulaires auto-suggest
Je vous montre un exemple de code source, là ce sera le fichier XML qui sera chargé et analysé directement avec jQuery, il est assez énorme, il est chargé en direct via Ajax, la liste de suggestions comment elle se construit ?
Voilà, h1 input, c’est votre liste de suggestions, le département de résidence c’est votre liste de suggestion, ce sont des départements là, je ne vous l’ai pas dit, la liste ce sont des départements.
C’est aussi simple que ça, vous définissez la taille de la liste de suggestions avec sa hauteur, sa largeur, si vous voulez mettre une scrollbar, verticale, horizontale, voilà, et là, vous créez la liste avec le contenu XML, enfaite, déjà on va créer le contenu de la liste de suggestions, celle-là, la première, avec un tri sur le tableau et un tri automatique des dernières réponses qui seront effectuées. Un délai pour l’affichage de la liste, l’appel minimum zéro, dès que l’utilisateur clique là, ça affiche toutes les suggestions avec une scrollbar, voilà, ensuite, on écoute les événements donc quand on ouvre, on fait un autocomplete, une petite animation, ouverture fermeture, et à la fermeture une autre animation également. Ensuite c’est sur le focus, affichage au focus de l’utilisateur, sur le focus dès que l’utilisateur clique ici on affiche la liste, et là c’est chargement via Ajax, via Ajax on donne l’URL du fichier XML, en get c’est des données XML, si il a réussi à trouver un fichier on appel à fonction d’analyse de fichier XML, donc ça va charger le contenu du fichier XML, on trouve le nœud item, ici, tous les nœuds item voilà, et dans les nœud item on récupère le département, on parcours le tableau avec un each, je vous renvoie, j’ai fait un cours sur jQuery la fonction each, les tableaux, je vous renvoie à ce cours, et là on trouve le nœud département et on récupère le texte qui y a là, dans le département, votre nœud département, le texte ici, et on remplit notre tableau Nathalie, c’est un tableau qui est définit ici, qui contient la liste des départements, on écoute, on créé la liste donc ça c’est la liste XML, la source haut Nathalie du tableau, taille minimum le nombre de lettres, il doit saisir deux lettres avant que la liste s’affiche, là la liste ne s’affiche pas, je saisie deux lettres, la liste s’affiche et automatiquement elle se réduit au fur et à mesure que je tape, et voilà, je peux sélectionner, et il y a des animations évidemment pour l’ouverture et la fermeture de la liste. Voilà c’est aussi simple que ça, vous avez votre liste, si vous tapez ça se réduit d’eux-mêmes, la liste voilà, elle est classée automatiquement par ordre alphabétique, très pratique la liste déroulante, c’est super, pareils pour les départements automatiquement sa s’affiche, il n’y a pas de département avec un T, avec un R ? Non plus, très puissant les listes avec auto-suggestions.
Votre plan d’actions !
Vous avez vu il n’y a rien de bien méchant pour l’implémenter le chargement Ajax via un fichier XML, PHP, ou HTML, comme vous le voulez, vous pouvez énormément personnaliser la liste, comme d’habitude vous retrouverez sous ce cours vidéo, sur Développement Facile, le code source commenté en téléchargement, comme ça, ça vous fera un bon exemple pour l’implémenter dans vos sites Internet. Si vous avez des questions posez-les directement sous la vidéo, et je vous invite à regarder dès maintenant la deuxième vidéo, il y a un lien au-dessus, une image vidéo deux et en dessous de cette vidéo, dans la deuxième vidéo je vais vous expliquer comment pendant quatre mois je vous accompagne pour maîtriser les frameworks jQuery, framework Dojo, l’extension jQuery UI, tout ça vous bénéficiez de mon accompagnement individuel, tout est expliqué dans la deuxième vidéo, cliquez sur l’image vidéo 2 en haut, ou en dessous de cette vidéo, en attendant, je vous dit à très bientôt sur Développement Facile.
