Autocompletion et JSON

[Jailaforme]

Bonjour,

J'espère être au bon endroit pour obtenir l'aide dont j'ai besoin.

Ce que je cherche à faire : afficher la liste des adherents dans le champs de recherche avec autocompletion et renvoi de l'id

J'ai choisi, parce que je pensais que ce serait plus facile, TYPEAHEAD

Seulement je suis novice, très très novice avec JS autant je taquine php mais JS

J'ai 4 fichiers, détaillé ci-dessous, que vous trouverez à l'adresse suivante : https://udsp.fr/autocomplete

typeahead.js récupéré à l'adresse suivante :
https://github.com/twitter/typeahead.js ... .bundle.js

autocomplete.js

Code : Tout sélectionner

  var adherents = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'adherents.php'
  });

  // options being used
  $('#adherents .typeahead').typeahead(null, {
    name: 'adherents',
    source: adherents
  });

adherents.php contient les données au format json

Code : Tout sélectionner

[{"id_adherent":"1","nom":"lenom","prenom":"leprenom"}]

index.php contient le formulaire et appelles les fichiers nécessaires

Code : Tout sélectionner

<form id="nouveau" method="POST" action="?search">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <div id="adherents">
        <input class="form-control form-control-sm typeahead" type="text" placeholder="Recherche" name="search" id="search">
      </div>
    </div>
    <div class="col-auto">
      <input type="submit" class="btn btn-primary btn-sm" value="ok">
    </div>
  </div>	
</form>

Problème n°1 : les données n'apparaissent pas
Problème n°2 : je ne sais pas comment faire pour récupérer l'id au lieu du nom/prenom à l'envoi du formulaire.

Merci de votre aide !