Categories
Unclassified

Autocomplétion des adresses avec la Base Adresse Nationale

ban

Lors de mon stage à Diagamter cet été, j’ai eu pour tâche de créer un formulaire d’autocomplétion des adresses. Après avoir fait un tour d’horizon des outils disponibles, un m’a marqué : la Base Adresse Nationale. Tout d’abord parce cette API est officielle, qu’elle peut faire office de référence ; toutes les modifications de communes y sont répertoriées rapidement. Ensuite, elle simple, bien documentée et n’a pas de quota de requête à ma connaissance.

Le but est donc de mettre en place un formulaire simple qui va envoyer des requêtes à l’API lorsqu’on saisit d’abord le code postal, puis la ville et enfin l’adresse en elle-même. On va donc se servir de jQuery et jQuery UI pour mettre en place l’autocomplétion :

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.7.3/themes/base/jquery-ui.css">

Ensuite, on met en place les inputs en eux-mêmes :

<input name="cp" id="cp" type="text" placeholder="CP">
<input name="ville" id="ville" type="text" placeholder="Ville">
<input name="adresse" id="adresse" type="text" placeholder="Adresse">

Enfin, on s’attaque aux fonctions d’autocomplétion : tout d’abord le code postal. Le but est de saisir un code et d’afficher la ville à laquelle il est rattaché. Par exemple, si on tape “31000”, on obtiendra “31000 – Toulouse”. Un clic dessus permettra de remplir les deux premiers champs. De la même façon, si on tape “Toulouse” dans le deuxième champ, on aura le même résultat.

On décode ensuite l’objet json GeoCode retourné pour exploiter le code postal, le nom de la ville et l’adresse.

Code des trois autocomplétions :

<script>
$("#cp").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
            data: { q: request.term },
            dataType: "json",
            success: function (data) {
                var postcodes = [];
                response($.map(data.features, function (item) {
                    // Ici on est obligé d'ajouter les CP dans un array pour ne pas avoir plusieurs fois le même
                    if ($.inArray(item.properties.postcode, postcodes) == -1) {
                        postcodes.push(item.properties.postcode);
                        return { label: item.properties.postcode + " - " + item.properties.city, 
                                 city: item.properties.city,
                                 value: item.properties.postcode
                        };
                    }
                }));
            }
        });
    },
    // On remplit aussi la ville
    select: function(event, ui) {
        $('#ville').val(ui.item.city);
    }
});
$("#ville").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "https://api-adresse.data.gouv.fr/search/?city="+$("input[name='ville']").val(),
            data: { q: request.term },
            dataType: "json",
            success: function (data) {
                var cities = [];
                response($.map(data.features, function (item) {
                    // Ici on est obligé d'ajouter les villes dans un array pour ne pas avoir plusieurs fois la même
                    if ($.inArray(item.properties.postcode, cities) == -1) {
                        cities.push(item.properties.postcode);
                        return { label: item.properties.postcode + " - " + item.properties.city, 
                                 postcode: item.properties.postcode,
                                 value: item.properties.city
                        };
                    }
                }));
            }
        });
    },
    // On remplit aussi le CP
    select: function(event, ui) {
        $('#cp').val(ui.item.postcode);
    }
});
$("#adresse").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
            data: { q: request.term },
            dataType: "json",
            success: function (data) {
                response($.map(data.features, function (item) {
                    return { label: item.properties.name, value: item.properties.name};
                }));
            }
        });
    }
});
</script>

Fiddle de démonstration :

23 replies on “Autocomplétion des adresses avec la Base Adresse Nationale”

pour autant ne donne que la vile principale à un code postal donné, alors que parfois plusieurs villages y sont rattachés …
comment modifier ?

Pour avoir plusieurs villes sur un meme code postal insert ca dans la fonction postcode :

if ($.inArray(item.properties.city, postcodes) == -1) {
postcodes.push(item.properties.city);

Bonjour
tout d’abord merci pour ce script

Mais je n’arrive pas à afficher la zone de liste quand il y a plusieurs villes sur un code postal comme par exemple le cp 59300 peut être Valenciennes, Famars, Aulnoy les Valenciennes….

“Pour avoir plusieurs villes sur un meme code postal insert ca dans la fonction postcode :

if ($.inArray(item.properties.city, postcodes) == -1) {
postcodes.push(item.properties.city);”
je ne sais pas à la place de quel code il faut mettre celui ci-dessus.

merci

à quel endroit exactement ? parce que je n’y parvient pas …
Pouvez-vous poster le code modifié ?
Merci beaucoup

Bonjour ! Super boulot, par contre, je m’aperçois que si un code postal a plusieurs villes correspondantes, il n’en affiche qu’une… une idée ??
Merci en tout cas pour ce code bien construit et simple.

Bonjour,
Pour tous les codes postaux que j’ai essayé, j’ai le problème, je n’ai jamais qu’un seul résultat
Exemple : 51250

Mille merci pour ce tutorial qui m’a bien sauvé la mise!

Toutefois j’ai une question. Je n’utilise que le champ ville (on peut donc y taper soit le code postal, soit la ville) et le résultat retourné est celui de la ville.

J’ai l’impression qu’il y a des bugs dans la recherche. Par exemple si je tape “ploer” dans le champ, il va me proposer: ploermel, cayenne, ploeren, ploerdut et nantes. Que viennent faire Nantes et Cayenne dans les propositions?

C’est just un exemple mais cela arrive très fréquemment quand on ne tape que quelques lettres du nom de la ville. Il faut en taper beaucoup pour ne plus avoir ce bug d’affichage.

Y a-t-il une raison et une solution à cela?

Leave a Reply

Your email address will not be published. Required fields are marked *