Recherche autocomplete adresse API data.gouv.fr

Script d'exemple d'utilisation de l'API adresse.data.gouv.fr avec bootstrap et jQuery. Le résultat propose un champ de recherche avec autocomplétion utilisable par le clavier ou à la souris.

by Mickael_Mouton

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>


<div class="container">
  <form id="modal_form" action="process_form.php" method="post">
    <div class="form-row">
      <div class="form-group col">
        <label for="adresse" class="control-label">Adresse</label>
        <input type="text" class="form-control" id="adresse" name="adresse" autocomplete="off" data-toggle="tooltip" data-placement="top" title="Ce champ est intelligent... essaie d'y taper à peu près n'importequoi, par exemple : barry 65150 ;)" />
        <div class="address-feedback position-absolute list-group" style="z-index:1100;">
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-sm-3">
        <label for="cp" class="control-label">Code Postal</label>
        <input type="text" class="form-control" id="cp" name="cp" />
      </div>
      <div class="form-group col-sm-6">
        <label for="ville">Ville</label>
        <input type="text" class="form-control" id="ville" name="ville" required />
      </div>
      <div class="form-group col-sm-3">
        <label for="pays">Pays</label>
        <input type="text" class="form-control" id="pays" name="pays" />
      </div>

    </div>
  </form>
</div>

JavaScript

// FACULTATIF : Pour l'infobulle bootstrap du champ #adresse
$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

/*
 * Script de gestion de recherche avec l'API adresses.data.gouv.fr
 * 
 */

var currentFocus = -1;
var fetchTrigger = 0;

// Fonction pour mettre en forme visuellement un résultat sélectionné
function setActive() {
  var nbVal = $("div.address-feedback a").length;
  if (!nbVal)
    return false; // Si on n'a aucun résultat listé, on s'arrête là.
  // On commence par nettoyer une éventuelle sélection précédente
  $('div.address-feedback a').removeClass("active");

  // Bidouille mathématique pour contraindre le focus dans la plage du nombre de résultats
  currentFocus = ((currentFocus + nbVal - 1) % nbVal) + 1;

  $('div.address-feedback a:nth-child(' + currentFocus + ')').addClass("active");
}

// Au clic sur une adresse suggérée, on ventile l'adresse dans les champs appropriés. On espionne mousedown plutôt que click pour l'attraper avant la perte de focus du champ adresse.
$('div.address-feedback').on("mousedown", "a", function(event) {
  // Stop la propagation par défaut
  event.preventDefault();
  event.stopPropagation();

  $("#adresse").val($(this).attr("data-name"));
  $("#cp").val($(this).attr("data-postcode"));
  $("#ville").val($(this).attr("data-city"));

  $('.address-feedback').empty();
});

// On espionne le clavier dans le champ adresse pour déclencher les actions qui vont bien
$("#adresse").keyup(function(event) {
  // Stop la propagation par défaut
  event.preventDefault();
  event.stopPropagation();

  if (event.keyCode === 38) { // Flèche HAUT
    currentFocus--;
    setActive();
    return false;
  } else if (event.keyCode === 40) { // Flèche BAS
    currentFocus++;
    setActive();
    return false;
  } else if (event.keyCode === 13) { // Touche ENTREE
    if (currentFocus > 0) {
      // On simule un clic sur l'élément actif
      $("div.address-feedback a:nth-child(" + currentFocus + ")").mousedown();
    }
    return...