API adresse.data.gouv.fr : champ d'autocomplétion

Version imprimable

24/03/2017, 22h41
fwebconcept

API adresse.data.gouv.fr : champ d'autocomplétion

Bonjour,

j'ai trés peu de connaissance en javascript et je recherche un peu d'aide afin de réaliser un champs avec auto-completion d'adresse comme on peu le rencontrer souvent avec l'api google map mais avec l'api https://adresse.data.gouv.fr/api/ .

en effet j'ai besoin de récupérer les code insee des ville pour la suite.

je suis preneur de conseils, lien de tuto, enfin de toute aide.

merci par avance.
25/03/2017, 11h32
mathieu

pour faire cela vous pouvez essayer cette bibliothèque qui fait partie du projet jQuery :
https://jqueryui.com/autocomplete/
03/05/2017, 15h09
zut_php

Est ce juste l'insee ou l'adresse complète ?

Bonjour,

Si c'est juste le code insee plus le nom de la commune, le mieux c'est de récupérer un json des 36000 communes avec clés valeurs , puis en front utiliser typeahead.js ( autocomplétion bootstrap ) --> tu le trouves facilement sur data gouv ...

Si c'est l'adresse complète ( ex : google place) --> et que tu souhaites utiliser l'open data --> tu n'as pas le choix , ce sera l'api ban (https://adresse.data.gouv.fr/api/)

Bon courage à toi
04/05/2017, 22h12
fwebconcept

merci de vos retour,

entre temps j'ai bossé sur l'api de google mais je suis revenu en arriere car j'avais des erreurs avec mes utilisateurs et des adresses que google ne trouvais pas.

je vais continuer creuser la piste de api data gouv...

bonjour je butte sur "typeahead.js"

j'ai suivi plusieurs tuto mais malgré ça , je n'obtient pas la suggestion...

voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html lang="en">
<head>
    <title>Bootstrap Typeahead with Ajax Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
 
<div class="row">
    <div class="col-md-12 text-center">
        <br/>
        <h1>Search Dynamic Autocomplete using Bootstrap Typeahead JS</h1>
        <input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
    </div>
</div>
 
<script type="text/javascript">
 
    $('input.typeahead').typeahead({
        source:  function (query, process) {
            return $.get('/bdd.php', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
 
</script>
</body>
</html>

et mon php... (sachant que mon php quand je l'appelle directement me retourne bien le json

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
 
include_once('path.php');
 
include_once($path . '/connect_pdo.php');
 
 
if(isset($_GET['query'])) {
    // Mot tapé par l'utilisateur
    $q = htmlentities($_GET['query']);
 
 
 
 
    // Requête SQL
    $requete = "SELECT Nom_commune FROM base_CP WHERE Nom_commune LIKE '". $q ."%' LIMIT 0, 10";
 
    // Exécution de la requête SQL
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
 
    // On parcourt les résultats de la requête SQL
    while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
        // On ajoute les données dans un tableau
        $suggestions['suggestions'][] = $donnees['Nom_commune'];
    }
 
    // On renvoie le données au format JSON pour le plugin
    echo json_encode($suggestions);
}

merci par avance

19/08/2017, 12h16
fwebconcept

bon j'ai presque reussi a faire ce que je voulais mais j'ai abandonné typehead et j'ai utilise jquery. je met mon code si ça peut aider quelqu'un.

maintenant je voudrai renseigner un champ hidden avec la valeur du champ INSEE ... mais je ne sais pas comment m'y prendre.

j'ai mis le code et ma question sur un autre topic

https://www.developpez.net/forums/d1...s/