codaleebs-widgets

Le codaleebs-address-widget est un composant Web permettant la recherche d’adresse en s’appuyant sur l’API api-adresse.data.gouv.fr (fonctionne avec les adresses françaises uniquement).

Fonctionnalités

Recherche dynamique d’adresses avec suggestions
Intégration d’une option de géolocalisation
Léger, encapsulé avec Shadow DOM
Design adaptatif basé sur Bulma CSS
Trie les résultats par importance
Gestion du data-type pour filtrer les résultats par type : housenumber, street, locality, municipality, etc.

Intégration

Ajoutez simplement ce script dans votre page HTML :

<script src="https://widgets.codaleebs.fr/address-widget/widget.js" defer></script>
<codaleebs-address-widget data-type="housenumber" data-geolocation="true"></codaleebs-address-widget>

Attributs personnalisables

Attribut	Valeurs possibles	Description	Défaut
`data-type`	`housenumber`, `street`, `locality`, `municipality`	Type de résultat souhaité (adresse complète, rue, établissement/lieu-dit, ville)	Tous les types
`data-geolocation`	`true` / `false`	Affiche ou non le bouton “Utiliser ma position”	`false`
`data-required`	`true` / `false`	Rend le champ obligatoire ou non	`false`
`data-placeholder`	Texte libre	Définit un texte personnalisé pour le champ de saisie	Description textuelle du type sélectionné

Exemple minimal

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <title>Widget adresse</title>
    <script src="https://widgets.codaleebs.fr/address-widget/widget.js" defer></script>
</head>
<body>
<codaleebs-address-widget data-type="housenumber" data-geolocation="true"></codaleebs-address-widget>
</body>
</html>

Résultat sélectionné

Il est possible de récupérer les IDs des widgets affichés à l’écran via :

document.addEventListener('DOMContentLoaded', () => {
    const widgets = document.querySelectorAll('codaleebs-address-widget');
    widgets.forEach(widget => {
        console.log(widget.id);
    });
});

Lorsqu’une adresse est sélectionnée, les coordonnées latitude/longitude sont disponibles via :

console.log(widget.coordinates);

La valeur textuelle de l’adresse sélectionnée est accessible via :

console.log(widget.value);

Accessibilité

Le champ est compatible avec les lecteurs d’écran et utilise aria-label, aria-describedby, et aria-live pour l’annonce des résultats.

📚 Licence

Code sous licence MIT. Voir le fichier LICENSE.

Pour toute suggestion ou contribution, ouvrez une issue ou contactez-nous via codaleebs.fr.

This site is open source. Improve this page.