Discussion :

[PIEPLU]

Bonjour,

J'ai un champs ou je remplis un numéro de SIRET :

Code html :

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

<input type="text" name="siret" placeholder="Numéro de SIRET" required class="siret" />

Ensuite, j'ai dans mon fichier de fonctions

Code javascript :

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

1
2
3
4
5
6
7
$(document).ready(function () {
	$(".siret").autocomplete({
		source : "http://" + SITE + "/ajax_siret.php",
		minLength: 2,
		delay: 100
	});
});

Et dans le fichier ajax_siret.php :

Code php :

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

1
2
3
4
5
$requete = requete("SELECT nom FROM Agences where siret LIKE '" . $q . "%' order by nom asc limit 25");
foreach($requete as $val) {
	$groupes[$i] = $val['nom']; 
	$i++;
}

Ca me renvoi bien des valeurs de ce genre :
["Cabanis les routes"]

Jusque là, pas de soucis.

Actuellement, lorsque je saisie le SIRET, je ne vois bien apparaître dans une liste qui s'affiche sous le champs de ma saisie. Et quand je clique dessus, le siret est remplacé par le "nom".
Et c'est là que je ne veux pas.
En fait, il faut que le siret reste en place et que le nom et d'autres informations s'affichent directement dans leur champ.
Exemple :

Code html :

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

<input type="text" name="nom_agence" placeholder="Nom de l'agence" required />

J'espère avoir été clair

Merci

[danielhagnoul]

Bonsoir

Impossible de tester la réponse au problème sans l'ensemble des codes (CSS, HTML, JS) et du fichier source pour l'UI Autocomplete.

Je suggère de tester :

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
/*
 * Voir l'exemple : http://jqueryui.com/autocomplete/#remote
 */
$( "input[name='siret']" ).autocomplete({
    "source" : "http://" + SITE + "/ajax_siret.php",
    "minLength" : 2,
    "delay" : 100,
    "select" : function( event, ui ){
        /*
         * Structure de la "source" : 
         * http://api.jqueryui.com/autocomplete/#option-source
         * 
         * On peut avoir ui.item ou 
         * ui.item.value et ui.item.label
         */
        $( "input[name='nom_agence']" ).val( ui.item );
    }
});

[PIEPLU]

Presque je pense,

La case se remplie bien, mais la donnée affichée est : [object Object]
Dans le fichier ajax_siret, je retourne ceci : ["Cabanis les routes"] grâce à la fonction

Code php :

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

json_encode($groupes);

Pour le moment, j'ai mis

Code php :

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

$groupes[$i] = $val['nom'];

Il va falloir que je rajoute des données, comme ci :

Code php :

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

$groupes[$i] = array('nom' => $val['nom'], 'rue' => $val['rue'], 'cp' => $requete_ville[0]['cp'], 'ville' => $requete_ville[0]['nom']);

Ca me renvoie

[{"nom":"Cabanis les routes","rue":"75 Avenue Clovis Hugues","cp":"14000","ville":"Caen"}]

Merci de ton aide très utile

[danielhagnoul]

Bonjour

Attention, comme dit dans les commentaires de mon code, UI Autocomplete demande une structure précise : [ { "label" : "Choice1", "value" : "value1" }, ... ].

Dans les démonstrations, on trouve aussi l'exemple suivant :

Code JSON :

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
[
    {
        "value" : "jquery",
        "label" : "jQuery",
        "desc" : "the write less, do more, JavaScript library",
        "icon" : "jquery_32x32.png"
    },
    {
        "value" : "jquery-ui",
        "label" : "jQuery UI",
        "desc" : "the official user interface library for jQuery",
        "icon" : "jqueryui_32x32.png"
    },
    {
        "value" : "sizzlejs",
        "label" : "Sizzle JS",
        "desc" : "a pure-JavaScript CSS selector engine",
        "icon" : "sizzlejs_32x32.png"
    }
]

[PIEPLU]

Tu veux dire qu'on ne peut avoir que
value, label, desc, icon ???

[danielhagnoul]

Tu veux dire qu'on ne peut avoir que
value, label, desc, icon ???

La documentation dit que le widget travaille sur les propriétés "label" et "value". Il peut y avoir d'autres propriétés, mais celles-là sont nécessaires.