<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> </p> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'>A partir du fichier pays.json :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> [</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Afghanistan"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Afrique du Sud"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Albanie"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Algerie"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Allemagne"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Andorre"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Angola"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Anguilla"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Antarctique"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Antigua-et-Barbuda"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Antilles neerlandaises"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Arabie saoudite"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Argentine"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Armenie"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Aruba"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Australie"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Autriche"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Azerbaidjan"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Bahamas"},</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> .</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> .</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> .</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {"nom": "Zimbabwe"}</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> ]</p> </div> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> </p> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> On veut obtenir l'affichage suivant :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <img width="213" height="175" id="Image 1" src= "tp2Pays_fichiers/image001.png" alt="image" name="Image 1" /></p> </div> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> </p> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> La saisie d'une lettre dans la zone de texte permet l'affichage des pays commençant par cette lettre dans la liste déroulante.</p> <span style= 'font-size:11.0pt;line-height:107%;font-family:"Calibri",sans-serif'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> </p> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> Script html de départ :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <html></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <head></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <script></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'>var donnees;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> function recupRessource(url)</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> var requeteHttp = new XMLHttpRequest();</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> requeteHttp.open('GET',url,false);</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> requeteHttp.send(null);</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> // La récupération d'un fichier Json est similaire à la récupération d'un fichier texte</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> var valeurJSON = requeteHttp.responseText;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> return valeurJSON;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> }</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> function exploitFichierDesPays()</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> var valJson = recupRessource("pays.json");</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> donnees = JSON.parse(valJson);</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> }</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> function listerPays(lettres)</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> // Ici : exploitation des donnees JSON (dans la variable "donnees") pour alimenter</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> // la liste déroulante "affichePays" en fonction des caracteres saisis par l'utilisateur</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> // A FINIR</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> }</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </script></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <style type="text/css"></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> input,select</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> {</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> font-family:Arial;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> font-size:11px;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> background-color:lightgray;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> width:220;</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> }</p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </style></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </head></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <body onLoad="exploitFichierDesPays()"></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <form name='f1'></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> Liste des pays : <br/></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <input type='text' id='saisiePays' onKeyUp='listerPays(this.value);'></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <br/></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> <select id='affichePays' size='10'></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </select></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </form></p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </p> <p class="MsoNormal" style= 'margin-bottom:0cm;line-height:normal;border:none; padding:0cm'> </html></p> </div> <p class="MsoNormal" style='margin-bottom:0cm;line-height:normal'> </p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor