<div class="container">
  <div class="row">
    <div class="col-6 adresse">
      <form novalidate>
        <div class="form-row">
          <label>Adresse *</label>
          <input type="text" class="form-control" id="inputRue" name="inputRue" placeholder="Adresse">
          <input type="text" class="form-control" pattern="^[0-9]{1}[0-9a-bA-B]{1}[0-9]{3}$" id="inputCodePostal" minlength="5" maxlength="5" placeholder="Code Postal">
          <input type="text" class="form-control" id="inputVille" name="inputVille" placeholder="Ville">
        </div>
      </form>
    </div>
    <div class="col-6 proposition">
      <div class="adress-feedback">
        <ul></ul>
      </div>
    </div>
  </div>
</div>
.row {
  display: flex;
}

.adress-feedback ul {
  list-style-type: '- ';
}
$("#inputRue").keyup(function(event) {
	// Stop la propagation par défaut
        event.preventDefault();
        event.stopPropagation();

        let rue = $("#inputRue").val();
        $.get('https://api-adresse.data.gouv.fr/search/', {
            q: rue,
            limit: 15,
            autocomplete: 1
        }, function (data, status, xhr) {
            let liste = "";
            $.each(data.features, function(i, obj) {
                console.log(obj.properties);
                // données phase 1 (obj.properties.label) & phase 2 : name, postcode, city
                // J'ajoute chaque élément dans une liste
                liste += '<li><a href="#" name="'+obj.properties.label+'" data-name="'+obj.properties.name+'" data-postcode="'+obj.properties.postcode+'" data-city="'+obj.properties.city+'">'+obj.properties.label+'</a></li>';
            });
            $('.adress-feedback ul').html(liste);

            // ToDo: Au clic du lien voulu, on envoie l'info en $_POST
            $('.adress-feedback ul>li').on("click","a", function(event) {
                // Stop la propagation par défaut
                event.preventDefault();
                event.stopPropagation();

                let adresse = $(this).attr("name");

                $("#inputRue").val($(this).attr("data-name"));
                $("#inputCodePostal").val($(this).attr("data-postcode"));
                $("#inputVille").val($(this).attr("data-city"));

                $('.adress-feedback ul').empty();
            });

        }).error(function () {
            // alert( "error" );
        }).always(function () {
            // alert( "finished" );
        }, 'json');
    });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js