Bonjour à tous,


Voici le contexte :

Je fais un site web ou je répertorie sur une carte google map (API V3), des fournisseurs.
Sur l'interface, il y a un input avec un autocomplete de jQueryUi, qui va récupérer dans ma BDD une liste de villes de France.
Aujourd'hui j'arriver à retourner le libellé de la ville,
Mais j'aimerais pouvoir retourner dans l'autocomplete le libellé et récupérer l'ID de la ville lorsque je valide mon formulaire.
En cherchant sur google j'ai vu une piste sur le JSON, mais je n'ai pas compris comment retourner l'id..
Je tiens à préciser que mes connaissances en JS/jQuery sont très limitées car je commence tous juste.
Si quelqu'un pourrais m'aiguiller ?


voici mon autocomplete.php
Code php : 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
<?php
if(isset($_GET['q'])) {
    $q = htmlentities($_GET['q']); 
 
 
    try {
        $bdd = new PDO('mysql:host=localhost;dbname=distributeur', 'root', '');
    } catch(Exception $e) {
        exit('Impossible de se connecter à la base de données.');
    }
 
    $requete = "SELECT nom, id_ville FROM ville2 WHERE nom LIKE '". $q ."%' LIMIT 0, 10"; 
 
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
 
    while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
 
 
        echo $donnees['nom'] ."\n"; 
 
    }
 
}


et mon formulaire dans l'interface :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<script>
        $(document).ready(function(){
            $("#appendedInputButton").autocomplete("autocomplete.php", {
                selectFirst: true
            });
        });
</script>
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<form method="GET" action="index.php">	
      <input type="hidden" name="controller" value="ville">
      <label>Aller &agrave; :</label> 
 
      <div class="input-append">
 
            <input class="span11" id="appendedInputButton" type="text" name="id_ville" placeholder="Entrez une ville">
 
             <button class="btn" type="submit">Go!</button>
      </div>
 
</form>

Merci d'avance,

Bonne journée,