<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>
$("#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');
});