Discussion :

[Matt2010]

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,

[SpaceFrog]

il me semble que autocomplete possède un evenement onSelect.

[Kaamo]

En cherchant sur google j'ai vu une piste sur le JSON, mais je n'ai pas compris comment retourner l'id..

En PHP, actuellement, tu retournes une simple chaine avec le nom des villes correspondantes séparées par un retour à la ligne echo $donnees['nom'] ."\n";.
C'est à ce niveau qu'il faut que tu retournes un JSON et ensuite traiter ce JSON simplement avec Javascript pour faire ce que tu veux.

Une inspiration : De PHP à Javascript : une méthode

[Matt2010]

Spacefrog, l'événement "onSelect" n'existe pas. Il y a l'événement "select" avec l'autocomplete de jQueryUi avec comme définition ceci :

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item.
Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

Est-ce la même chose ou pas du tout ?


Merci kaamo pour la source, je jette un oeil !

[SpaceFrog]

http://jsfiddle.net/TFM23/

en effet le onSelect c'est pour le datePicker, j'ai confondu

là dans le select tu fais ce que tu veux dans la fonction ...