Fichier "RecupPaysJson.html" complet :

<html>

<head>

<script>

var donnees;

function recupRessource(url)

{

               var requeteHttp = new XMLHttpRequest();

               requeteHttp.open('GET',url,false);

               requeteHttp.send(null);

               // La récupération d'un fichier Json est similaire à la récupération d'un fichier texte

               var valeurJSON = requeteHttp.responseText;

               return valeurJSON;

}

function exploitFichierDesPays()

{

               var valJson = recupRessource("pays.json");

               donnees = JSON.parse(valJson);

}

function listerPays(lettres)

{

               var aff = document.getElementById('affichePays');           

               var i = 0;

               var tabReponses = [];

              

               // "Parcours" des données (nouvelle version du for each...)

               for (ind = 0; ind < donnees.length; ind++)

               {

                              objet = donnees[ind];

                              // Va écrire sur la console JavaScript

                              // console.log("Pays : " + objet.pays + "  Abreviation : " + objet.code);

                              var long = lettres.length;

                              //alert ("longueur:" + long + " debut:" + objet.pays.substring(0, long));

                              //alert("lettres:" + lettres);

                              //alert("pays:" + objet.nom);

                              if (long > 0 && objet.nom.substring(0, long).toUpperCase() == lettres.toUpperCase())

                              {

                                            tabReponses[i] = objet.nom;

                                            i++;

                              }

               }

               // On renseigne la zone select avec le contenu du tableau tabReponses

               aff.length = tabReponses.length; // Taille de la zone select ( = nombre de réponses)

               for(i=0; i < tabReponses.length; i++)

               {

                              aff.options[i].text = tabReponses[i];

               }

}

</script>

<style type="text/css">

input,select

{

               font-family:Arial;

               font-size:11px;

               background-color:lightgray;

               width:220;

}

</style>

 

</head>

<body onLoad="exploitFichierDesPays()">

 

<form name='f1'>

Liste des pays : <br/>

<input type='text' id='saisiePays' onKeyUp='listerPays(this.value);'>

<br/>

<select id='affichePays' size='10'>

               <span id='lesoptions'></span>

</select>

</form>

 

</html>