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

**fwebconcept** · 24/03/2017, 22h41

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.

**mathieu** · 25/03/2017, 11h32

pour faire cela vous pouvez essayer cette bibliothèque qui fait partie du projet jQuery :
https://jqueryui.com/autocomplete/

**zut_php** · 03/05/2017, 15h09

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

**fwebconcept** · 04/05/2017, 22h12

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...

**fwebconcept** · 18/08/2017, 20h19

bonjour je butte sur "typeahead.js"

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

voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fwebconcept** · 19/08/2017, 12h16

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/#post9546166

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

AJAX

Discussions similaires

Partager

Partager