jQuery UI

On ne peut pas tout faire avec la librairie de base jQuery. Par exemple ne cherchez pas à programmer un "drag and drop" (glisser et déposer) avec le framework de base.
Mais heureusement il y a des extensions (vous pouvez dire aussi : "plugins" ou encore "librairies secondaires" ou encore des "greffons"). L'extension la plus célèbre est jQuery UI (UI : comme interface utilisateur). Mais il existe aussi jQuery Mobile pour développer rapidement la version "petits écrans" d'un site. Un chapitre est consacré à jQuery mobile.

On dit que jQuery UI c'est un pack de "widgets" (composants graphiques).
Certains de ces outils deviendront moins utiles avec la montée en puissance de HTML & CSS.

Récupérer cette extension

Après extraction vous obtenez un dossier comprenant différents fichiers.

Comme dans la librairie de base il y a pour chaque type de fichiers (feuille de style, fichier JS) deux versions : la version avec commentaire et la version de production minimaliste (beaucoup plus légère).

Attention jQuery UI c'est non seulement un framework JavaScript mais aussi du CSS. Si vous chargez dans vos pages uniquement le fichier d'extension .js de la librairie jQuery UI le résultat sera ... décevant. Il faut charger aussi la feuille de style du pack : jquery-ui.min.css !

Créer différents onglets dans une page

Plutôt que de créer trois pages ou une page unique très longue on a décidé de répartir le texte de la page entre trois onglets.

En HTML il faut créer une boite (balise section) contenant trois boites "enfants" (balises article).
Il faut aussi créer des liens vers chaque article.

Pour que l'aspect de la page soit modifiée radicalement (création d'onglets : un par article) il suffit d'appliquer à la boite principale la méthode tabs() de jQuery UI.

Le code de l'exemple

... <script src ="jquery.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > <script src ="jquery_ui.js"></script> </head> <body> <section> <ul> <li><a href ="#onglet1" >onglet 1</a> <li><a href ="#onglet2" >onglet 2</a> <li><a href ="#onglet3" >onglet 3</a> </ul> <article id ="onglet1"> <h2>Premier onglet</h2> <p>Proinde die funestis interrogationibus praestituto imaginarius iudex ... </article> <article id ="onglet2"> <h2>Deuxième onglet</h2> <p>Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos ... </article> <article id ="onglet3"> <h2>Troisième onglet</h2> <p>Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato ... </article> </section> <script> $("section").tabs() ; </script> ...

J'ai renommé les fichiers correspondant à la librairie jQuery UI. Ils se nomment tout simplement : jquery_ui.js et jquery_ui.css

La librairie jQuery UI ne peut fonctionner seule ; comme c'est un "greffon" de jQuery la librairie principale jQuery doit être chargée également !

Attention pour charger une feuille de style externe il faut utiliser la balise LINK !

Concernant le code HTML dans la partie BODY il est relativement simple.

Quant au script il est d'une simplicité redoutable !
Il suffit d'appliquer la méthode tabs() au conteneur principal (SECTION).
Testez le widget "onglets" !

Comprendre comment ça marche !

En fait jQuery UI ajoute des classes à certaines balises ; classes qui sont définies dans la feuille de style de la librairie.
Ainsi d'après Firebug le code de la page est (extraits) :

<body> <section class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="onglet1" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"> <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="onglet2" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="true"> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="onglet3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"> </ul> <article id="onglet1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none;"> <article id="onglet2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" style="display: block;" aria-hidden="false"> <article id="onglet3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-3" role="tabpanel" style="display: none;" aria-hidden="true"> </section> ...

jQuery UI a ajouté aux éléments HTML différentes classes décrites dans la feuille de style externe.
C'est ainsi que les onglets et les boites sont mises en formes.

Utiliser le widget "accordéon"

Pour gérer une page volumineuse on peut aussi utiliser le widget "accordéon".
On dit qu'une page est "en accordéon" lorsque que le contenu de chaque partie est dépliable ou repliable.
Par défaut le visiteur ne voit que les titres des parties (sauf la première partie : titre et contenu). Si il clique sur le titre de la deuxième partie celle-ci est alors dépliée (affichage du contenu) et la première partie est repliée (contenu masqué). Et ainsi de suite ...

Le code de l'exemple (extrait)

... <!-- inclusion feuille de style CSS de jquery UI --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" /> <!-- inclusion des scripts de jquery et jquery UI --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> </head> <body> <section> <h2><a>Premier chapitre</a></h2> <p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit ... <h2><a>Deuxième chapitre</a></h2> <p>Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam ... <h2><a>Troisième chapitre</a></h2> <p>Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more ... </section> <script> $("section").accordion() ; </script> ...

Dans la partie HEAD il faut toujours inclure la feuille de style du framework et deux fichiers JS.
Mais ici, afin d'obtenir les dernières versions stables, je fais un lien vers le serveur GOOGLE qui met à disposition les librairies jQuery, jQuery UI (et jQuery Mobile).
Attention saisissez bien "https" (et non pas "http") !

Dans la partie BODY on retrouve exactement le même texte que dans l'exemple précédent.
Chaque partie du texte doit être précédée d'un titre qui contient un lien vide.
Cette instruction HTML est indispensable. Elle indique à jQuery UI les endroits où il doit se replier ou se déplier ...

Le script est encore d'une simplicité déconcertante.
Il suffit d'appliquer la méthode accordion() au conteneur principal (ici la balise SECTION).
Testez le widget "accordéon" !

Comprendre comment ça marche

Comme la méthode tabs() la méthode accordion() modifie le code HTML saisi.
Le code de la page d'après Firebug :

... <body> <section class="ui-accordion ui-widget ui-helper-reset" role="tablist"> <h2 id="ui-id-1" class="ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"> <p id="ui-id-2" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 103.4px;" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">Proinde die ... <h2 id="ui-id-3" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"> <p id="ui-id-4" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none; height: 103.4px;" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">Coactique aliquotiens nostri pedites ... ...

Comme avec le widget "onglets" le widget "accordéon" ajoute aux éléments HTML des classes décrites dans la feuille de style externe de la librairie.

Actualité

Avec la version 5 de HTML on peut désormais créer l'effet "accordéon" en HTML.
En effet il existe deux nouvelles balises DETAILS & SUMMARY ; la seconde devant être enfant de la première.
Serez vous surpris si je vous dis que ces balises ne sont pas implémentées par EDGE ...donc le widget "accordion" n'est pas encore obsolète.
Plutôt qu'un long discours un petit exemple ci-dessous !

Effet "accordéon" avec HTML5

Cliquez sur le petit triangle noir pour développer !

Histoire de Rome

In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

Le code HTML correspondant

<p class ="remarque">Cliquez sur le petit triangle noir pour développer ! <details> <summary> <h3>Histoire de Rome</h3> <p>In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit. </summary> <p>Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, ... <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur. </details>

Commentaire

Donc par défaut seul le texte contenu dans la balise "enfant" SUMMARY apparait ; sous Chrome il apparait dans un cadre borduré en bleu ! Pour déplier il suffit de cliquer sur le petit icône triangulaire (orienté vers la droite).
Pour replier il suffit de cliquer à nouveau sur l'icône triangulaire (orienté alors vers le bas).

Redimensionner les boîtes

Dans l'exemple ci-dessous chaque image peut être redimensionnée.

Le code de l'exemple (extraits)

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > <style> img{height : 20% ;} </style> </head> <body> <p class ="remarque">Vous pouvez redimensionner chacune des images grâces aux poignées qui apparaissent dès que vous survolez les bords d'une image.</p> <img src ="../images/bikini.jpg" /> <img src ="../images/seins_nus.jpg" /> ... <script> $("img").resizable() ; </script> ...

Dans la partie HEAD toujours inclusion de trois fichiers.

CSS : une règle de style pour affecter une dimension aux images.

Le script : application à la collection d'images de la méthode resizable().
Testez le widget "redimensionner"

Comprendre comment ça marche !

Les images apparaissent les unes sous les autres. Car là encore jQuery UI a rajouté des des classes aux éléments HTML !

Extraits du code d'après Firebug :

... <div class="ui-wrapper" style="overflow: hidden; position: relative; width: 115px; height: 150px; top: 0px; left: 0px; margin: 20px 0px 20px 0.25px;"> <img class="ui-resizable" src="../images/bikini.jpg" style="resize: none; position: static; display: block; height: 150px; width: 115px;"> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div> </div> ...

Non seulement une règle de style est rajoutée aux images mais en plus les balises IMG se retrouvent à l'intérieur d'une boite DIV ...

Permuter des éléments de la page

Nous allons maintenant évoquer la méthode sortable()

Le code de l'exemple (extraits)

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <script src ="jquery_touch_punch.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > </head> <body> <p class ="remarque">Remettez les items dans le bon ordre dans les listes ci-dessous ! <ul> <li>item 5 <li>item 2 <li>item 3 <li>item 4 <li>item 1 </ul> <ol> <li>item 5 <li>item 2 <li>item 3 <li>item 4 <li>item 1 </ol> <script> $("ul,ol").sortable() ; </script> ...

Attention pour que les éléments soient permutable au sein d'une élément parent il faut appliquer la méthode sortable() au parent (ici UL ou Ol) !

Dans la partie HEAD je charge le fichier jquery_touch_punch.js.
Sans ce "greffon" certains outils jQuery tels la méthode sortable() ne fonctionnent pas sur les terminaux à écran tactile (smartphone et tablette). Cette extension ne pèse que 2 KO !

Pour récupérer cette extension vous pouvez aller sur le site :http://touchpunch.furf.com
Testez la permutation !

Glisser-déposer avec Jquery UI

Je vais maintenant vous présenter le widget le plus célèbre de jQuery UI : le "drag and drop".

Le code de l'exemple (extraits)

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <script src ="jquery_touch_punch.js"></script> <style> img{width : 20% ; display : inline-block ; margin : 1% ; } div {height :200px ; width : 900% ; background : pink ; } </style> </head> <body> <img src ="../images/bikini.jpg" /> <img src ="../images/seins_nus.jpg" /> <img src ="../images/jolie_fille.jpg" /> <img src ="../images/trikini.jpg" /> <div>Déposez ici vos photos préférées</div> <script> $("img").draggable(); $("div").droppable(); </script> ...

Partie HEAD : Comme dans l'exemple précédent il faut charger deux fichiers JS (celui de la librairie jQuery et celui de jQuery UI).

Par contre dans le cadre d'un "glisser-déposer" il n'est pas nécessaire de charger la feuille de la librairie jQuery UI.

CSS : Les images sont des éléments inline-block (boites disposées côte à côte).

HTML : insertion de quatre images et création d'une grande boite avec un fond rose.

La première méthode rend "glissable" les éléments référencés (donc ici les images).
La deuxième méthode rend "déposable" les éléments référencés (donc ici une seule boîte: le DIV unique).
Donc on pourra faire glisser les images pour les déposer dans la boîte DIV (qui a un fond rose ...) !
Messieurs régalez vous ...

Vous pouvez constater que les images peuvent glisser partout car je n'ai pas paramétrer la méthode draggable().

Exercice

Vous devez programmer un test de connaissances en biologie aquatique. Vous devez en effet classer quatre photos dans deux cadres ; deux photos représentent des algues et deux autres des plantes aquatiques. Le rendu que vous devez obtenir

Les images et les boites DIV (fond rose) sont "inline-block".
Dans le cadre du "responsive web design" les largeurs des images, des marges et des DIV doivent être exprimés en % !

Le code jQuery ne pose aucune difficulté.

Paramétrer la méthode draggable

Ne pensez pas que le "drag and drop" ne peut s'appliquer qu'à des images. On peut glisser & déposer n'importe quel élément de la page.
Dans les exemples vous avez vu que l'on pouvait déplacer les images n'importe où dans l'écran.
Dans l'exemple ci-dessous les éléments "draggable" ne peuvent être glissés qu'à l'intérieur d'une grande boite car la méthode draggable() est paramétrée.
Essayez !

Le code correspondant

... <style> div {margin : 1% ; display : inline-block ;border : 1px solid red ; width :45% ; min-height : 400px ; vertical-align : top ; } ul li {width : 80% ; height : 40px ; margin-top : 5px; margin-left :1% ; background : gray; line-height : 40px ; text-align : center; list-style-type : none ;} </style> </head> <body> <article style ="width :850px ; height :auto ; margin :auto; background : pink;"> <h2>Composez l'équipe</h2> <div id ="joueurs"> <h3>Joueurs disponibles</h3> <ul> <li>Joueur A <li>Joueur B <li>Joueur C <li>Joueur D <li>Joueur E <li>Joueur F </ul> </div> <div id ="equipe"> <h3>Equipe</h3> </div> </article> <script> $("ul li").draggable({cursor: "move", containment : "article",axis : "x"}); $("#equipe").droppable();

Le "glisser-déposer" porte non pas sur des images mais sur des items de liste à puces.
Pour que ces items ressemblent à des boutons j'ai fait un gros effort en matière de CSS. Vous pouvez remarquez que la légende de chaque item est bien centrée horizontalement et verticalement. Il faut aussi se débarrasser de la puce.

HTML :
La boîte article comprend deux DIV ; la deuxième boîte DIV est identifié equipe.

JAVASCRIPT :

Il y a d'autres paramétrages possibles de la méthode draggable mais qui sont moins utiles ...

Atelier

Etes vous capable de produire le code correspondant à l'exemple ci-dessous ?
Les images ne peuvent glisser qu'à l'intérieur de la boite "article" ; celle bordurée par un trait pointillé rouge.
Il s'agit d'une amélioration du premier exemple sur le glisser-déposer.
Exemple à tester !

La saisie de dates

Les développeurs de site ont pris l'habitude d'utiliser jQuery UI et plus précisémment la fonction datepicker() pour créer dans les formulaires des champs date à partir de input type ="texte".

Attention il faut aussi mettre en forme le calendrier que l'on associe via la fonction datepicker() à un champ texte. Il faut donc non seulement charger le fichier JS de la bibliothèque jQuery UI mais aussi la feuille de style.

La version 5 de HTML a introduit les champs de type date. Donc quand ce type sera implémenté par tous les navigateurs le widget "datepicker" ne sera plus utile.

Exemple

... <script src ="jquery.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > <script src ="jquery_ui.js"></script> <style> form {width : 98%; border : 1px solid black;} input, button, label, textarea, select,span{display : inline-block ; margin : 1% ; width : 45% ; vertical-align : top; } </style>: </head> <body> <form> <input type ="hidden" value ="formulaire inscription" /> <label>Saisir votre pseudo :</label><input type="text" /> <label>Saisir date début</label><input type="text" /> <label>Saisir date fin</label><input type="text" /> <label></label><button type ="submit">Validez </buttton> </form> <script> $("input:text:eq(1)").datepicker(); $("input:text:eq(2)").datepicker(); ...

HEAD : il faut charger deux fichiers JS (libraire jQuery de base + jQuery UI) et une feuille de style externe pour formater le calendrier.

CSS : Les éléments de formulaire sont de type inline-block afin que la champ (input) se positionne à droite de la légende (label).

HTML : trois champs texte donc deux légendés "saisir une date" ...

Le script : on associe à deux champs texte la méthode datepicker() décrite dans la bibliothèque jQuery UI
Testez ce code

Il y a un gros bémol. Les dates saisies via le calendrier proposé par jQuery UI sont au format anglo saxon (mm-dd-yy).

Rassurez vous c'est pas dramatique. Il suffit de modifier un peu le script

Solution

$("input:text:eq(1)").datepicker({ dateFormat: 'dd-mm-yy'}); $("input:text:eq(2)").datepicker({ dateFormat: 'dd-mm-yy'});

Il a suffi d'argumenter la méthode datepicker() en précisant le format francophone.
Testez le code débuggé !

Il serait préférable que le calendrier soit lui aussi francisé.

Calendrier en français

Pour franciser le calendrier il suffit de rajouter quelques lignes de code. Code facile à trouver sur la "toile". Il suffit de poser la question "franciser le calendrier de jquery ?".

Donc le script devient (pas de changement pour le CSS et HTML) :

$.datepicker.setDefaults( { closeText: 'Fermer', prevText: 'Précédent', nextText: 'Suivant', currentText: 'Aujourd\'hui', monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'], dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'], dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'], weekHeader: 'Sem.', dateFormat: 'dd-mm-yy' } ); $("input:text:eq(1)").datepicker(); $("input:text:eq(2)").datepicker();

Le format de saisie est proposé dans le tableau de paramétrage. Donc inutile de le préciser au niveau de la méthode datepicker().
Testez la version avec calendrier francisé !

Un widget obsolète ???

Remarque : Avec HTML 5 le widget calendrier de jQuery UI n'est plus à priori utile puisque il existe désormais les champs de type date.

Le code HTML :

... <body> <form> <input type ="hidden" value ="formulaire inscription" /> <label>Saisir votre pseudo :</label><input type="text" /> <label>Saisir date début</label><input type="date" /> <label>Saisir date fin</label><input type="date" /> <label></label><button type ="submit">Validez </buttton> </form> ...
Testez le code en HTML5

Testez cette page avec Firefox ou Chrome puis avec Edge!

Le problème avec les champs de type date de HTML5 c'est qu'en ce début de l'année 2018 ce type n'est toujours pas implémenté chez certains navigateurs dont EDGE.
De plus l'aspect du calendrier change selon les navigateurs qui ont intégré ce nouveau type de champ.
Donc le widget datepicker reste encore d'actualité !

Autocomplétion

Définition : vous commencez à saisir dans un champ texte et dès que vous avez tapé quelques lettres des suggestions apparaissent.

Il faut utiliser la méthode autocomplete() de jQuery UI mais aussi un tableau contenant une liste de mots.

Imaginons une recherche sur les grands acteurs de la deuxième guerre mondiale. Si vous tapez les lettres "De" le programme doit proposer "De Gaulle" par exemple.

Le code de l'exemple

... <form> <p class ="remarque">Recherche sur les personnages de la deuxième guerre mondiale. <input type="text" id="recherche" /> </form> <script> var liste = [ "De Gaulle", "Churchill", "Hitler", "Mussolini", "Staline", "Roosevelt" ]; $('#recherche').autocomplete({source : liste, minLength : 2}); ...

Attention il faut télécharger la feuille de style de jQuery UI afin qu'il y ait une mise en forme de la liste de suggestion !

Script :
La méthode autocomplete a une option obligatoire : la source. Dans l'exemple la source est la variable liste.
Ici il y a aussi une option facultative : minLength : nombre minimal de caractères à saisir pour afficher une liste de suggestions.
Testez la méthode autocomplete !

La source peut être une liste externe ; un fichier par exemple.
Dans ce cas la valeur de l'argument source est une requête AJAX !
Ce chapitre est terminé . Retournez au menu du tuto !