Discussion :

[Paulux1]

Bonjour,

Je fais une recherche dans une table de ma BDD client en autocompletion.
Lors de la sélection de l’utilisateur, je souhaiterais dispatcher le résultat vers les différents champs du formulaire…
Ex :

Code html :

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

1
2
3
4
5
<form>
    <input type="text" id="recherche" value=""/>
    <input type="text" id="ville" value=""/>
    <input type="text" id="pays" value=""/>
</form>

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
$('#recherche').autocomplete({
    source: function (requete, reponse) {
        $.ajax({
            type: 'POST',
            processData: true,
            url: 'processus/find.php',
            dataType: 'json',
            data: {
                nameContent: $('#recherche').val(),
                maxRows: 15
            },
            success: function (data) {
                reponse($.map(data, function (objet) {
                    return objet.nom + ' ' + objet.prenom + ' ' + objet.adresse1 + ' ' + objet.adresse2 + ' ' + objet.cp + ' ' + objet.ville + ' ' + objet.pays;
                }));
            },
            select: function (data) {
                reponse($.map(data, function (objet) {
                    $('#ville').val(objet.ville);
                    $('#pays').val(objet.pays);
                }));
            }
        });
    }
});

La première partie du code fonctionne…. Mais pas le « select : ».... Quelqu’un peut m’aiguiller ?
Merci

[SpaceFrog]

data vaut quoi lors du select ?

[Paulux1]

Lors du select, data est une liste de réponses possible renvoyé par mon URL (find.php) qui crée un tableau au format JSON.
Ceci fonctionne bien...

Data contient donc les éléments: nom, prenom, adresse1, adresse2, cp, ville, pays.

C'est lorsque que l'utilisateur sélectionne un choix que je voudrais dispatcher les éléments de réponse vers différents id...

[SpaceFrog]

Data contient donc les éléments: nom, prenom, adresse1, adresse2, cp, ville, pays.

en est tu certain ? as tu testé ? un console.log .... par exemple

[Paulux1]

Oui,oui la première partie fonctionne,
j'obtiens une liste de réponse parmi laquelle je peux choisir un élément.
Lorsque je clique sur l'élément, la totalité de la ligne (nom prenom ... ect.. ) s'affiche dans l'id "recherche".
Cette partie là fonctionne bien...
C'est la suite qui pose pblm...

Ce que je voudrais c'est lorsque je clique sur une possibilité, pouvoir afficher la ville de la ligne sélectionnée dans ville, idem pour le pays....
Dispatcher chaque éléments de réponse dans différents ID

[SpaceFrog]

Ce n'est pas là question ...
ton autocomplétion fonctionne bien soit, car c'est dans le success qu'elle se réalise et que ton paramètre data est bien renseigné ...

Je ne suis pas sur que cela soit le cas dans le select, d'ou le test de console.log pour voir si ton data contient bien ce que tu crois qu'il contient dans le select ...

[Paulux1]

ok, j'avais pas bien compris ta question...

Ce select ne fonctionne pas...
Je n'ai absolument rien dedans....
Mais je voudrais bien avoir un select qui aurait qq chose ...

[SpaceFrog]

le select est supposé se déclencher lors de la selection d'une option ...
je ne vois pas à quoi te sert le data à ce endroit ???

Quelle est l'ergonomie récherchée ? que veux tu faire lors de la selection ?

[Paulux1]

Oui, je sais que je n’utilise pas le select comme il faut dans mon bout de code.

J'espérais seulement pouvoir synthétisé mon idée, mon besoin....

J’ai en fait un formulaire client qui permet d’apporter des modifications sur les enregistrements.
A partir du champ nom, je souhaite mettre en place un autocomplete qui va aider l’utilisateur à choisir le client.
Lorsque le choix est fait, c’est-à-dire une sélection effectuée dans la liste de choix de l’autocompletion,
les différents champs du formulaire serait alors renseignés des éléments de la fiche client.
L’utilisateur pourrait alors modifier un ou plusieurs des champs et enregistrer les modifications en continuant le processus….

En fait, cela parait tout simple...mais... je ne sais pas comment faire...

[danielhagnoul]

select( event, ui ) est un gestionnaire d'événement du widget UI Autocomplete

Je vous conseille de regarder le code de cette démonstration

[Paulux1]

Merci pour le lien...
M'inspirant de l'exemple j'ai fait ceci qui "fonctionne" mais ce n'est pas très beau... Surement moyen d'affiner?

Code html :

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

1
2
3
4
5
6
7
8
9
<form>
    <input type="text" id="nom" value=""/>
    <input type="text" id="prenom" value=""/>
    <input type="text" id="adresse1" value=""/>
    <input type="text" id="adresse2" value=""/>
    <input type="text" id="cp" value=""/>
    <input type="text" id="ville" value=""/>
    <input type="text" id="pays" value=""/>
</form>

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
33
$('#nom').autocomplete({
    minLength: 2,
    source: function (requete, reponse) {
        $.ajax({
            type: 'POST',
            processData: true,
            url: 'processus/find.php',
            dataType: 'json',
            data: {
                nameContent: $('#nom').val(),
                maxRows: 15
            },
            success: function (data) {
                reponse($.map(data, function (objet) {
                    return objet.nom + '##' + objet.prenom + '##' + objet.adresse1 + '##' + objet.adresse2 + '##' + objet.cp + '##' + objet.ville + '##' + objet.pays;
                }));
            }
        });
    },
    select: function (event, ui) {
        var tabReponse = new Array();
        var line = ui.item.label;
        tabReponse = line.split("##");
        $('#nom').val(tabReponse[0]);
        $('#prenom').val(tabReponse[1]);
        $('#adresse1').val(tabReponse[2]);
        $('#adresse2').val(tabReponse[3]);
        $('#cp').val(tabReponse[4]);
        $('#ville').val(tabReponse[5]);
        $('#pays').val(tabReponse[6]);
        return false;
    }
});