MaterializeCSS - Formulaire et autocomplétion (données XML)

Bonjour,

Je développe un petit site Intranet pour mon travail avec le framework MaterializeCSS. J'ai un fichier XML qui contient une liste de points de vente dont voici un petit extrait :

<?xml version="1.0" encoding="UTF-8"?>
<serveurs>
  <magasin codeMagasin="60001">
    <codeMagasin>60001</codeMagasin>
    <nomMagasin>Truchtersheim</nomMagasin>
    <adresseIP>10.129.8.204</adresseIP>
  </magasin>
  <magasin codeMagasin="60012">
    <codeMagasin>60012</codeMagasin>
    <nomMagasin>Colmar Rouffach - Edu Cabexpert</nomMagasin>
    <adresseIP>10.128.56.204</adresseIP>
  </magasin>
</serveurs>

Un formulaire permet de se connecter au magasin désiré. Pour cela l'utilisateur saisit un nom de ville, des suggestions s'affichent, l'utilisateur sélectionne ce qu'il souhaite. J'aimerais afficher dans le champ le nom du magasin (nomMagasin du fichier XML) et envoyer l'adresse IP (adresseIP du fichier XML) lors de la validation du formulaire.

Voici mon code du formulaire :

<form method="post" action="Pages/trtConnexionMagasin.php" name="connexionMagasin" id="formulaireConnexionMagasin">
  <input type="hidden" id="magasin2" name="magasin2" value="">
    <div class="input-field col s12">
      <i class="material-icons prefix blue-text text-darken-4">store</i>
      <input type="text" id="magasin" class="autocomplete blue-text text-darken-4">
      <label class="blue-text text-darken-4" for="magasin">Saisir un code magasin ou une ville</label>
    </div>
    <div class="input-field col s12 right-align">
      <button data-target="connexionMagasin" class="waves-effect waves-light btn modal-trigger blue darken-4" onclick="validationFormulaire();"><i class="material-icons right">send</i>Se connecter</button>
    </div>
</form>

La documentation sur le site de MaterializeCSS indique comment procéder avec des données JSON :

$('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });

A ce jour la solution fonctionne avec JSON, mais on m'impose un fichier XML.
Quelqu'un peut m'aider à faire l'autocomplétion avec ce fichier XML ?

Par avance merci.

Kristien
Modifié par ChrisFX (11 Nov 2017 - 21:31)