Autocomplete et jQuery

**PIEPLU** · 19/01/2014, 12h35

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** · 20/01/2014, 00h20

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** · 20/01/2014, 11h18

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** · 20/01/2014, 11h40

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** · 20/01/2014, 11h44

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

**danielhagnoul** · 20/01/2014, 11h58

Envoyé par PIEPLU

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.

**PIEPLU** · 21/01/2014, 09h29

Je suis complètement perdu.

Si tu veux voir le code complet, je l'ai mis ici
http://www.ma-gestion-immo.com/valid...473aff16a511f9

Tu cliques sur Agence, et tu mets le SIRET : 48805738100060
Ca va t'exécuter : http://www.ma-gestion-immo.com/ajax_...48805738100060

Merci de ton aide

**danielhagnoul** · 21/01/2014, 11h51

Bonjour

Attention, vous utilisez des versions obsolètes de jQuery et de jQueru UI !

Exemple :

Code HTML :

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

1
2
3
4
5
6
7
8
<div id="agence">
    Infos Agence :<br />
    <input type="text" name="siret" placeholder="Numéro de SIRET" required class="siret" /><br />
    <input type="text" name="nom_agence" placeholder="Nom de l'agence" required /><br />
    <input type="text" name="adresse" placeholder="Adresse de l'agence" required /><br />
    <input type="text" name="cp" placeholder="Code postal" required /><br />
    <input type="text" name="ville" placeholder="Ville" required /><br /><br />
</div>

Code JS :

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
var dataset = [
    { "label" : "48805738100060", "value" : "Cabanis les routes", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100061", "value" : "Cabanis les routes 1", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100062", "value" : "Cabanis les routes 2", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100063", "value" : "Cabanis les routes 3", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" }
];
 
$( "input[name='siret']", "#agence" ).autocomplete({
    source: dataset,
    minLength: 2,
    select: function( event, ui ) {
        $( this ).val( ui.item.label );
        $( "input[name='nom_agence']", "#agence" ).val( ui.item.value );
        $( "input[name='adresse']", "#agence" ).val( ui.item.rue );
        $( "input[name='cp']", "#agence" ).val( ui.item.cp );
        $( "input[name='ville']", "#agence" ).val( ui.item.ville );
        return false;
    }
});

Ma page de test, il suffit de copier-coller pour 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.13.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.0.3.min.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" },
            "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <hgroup>
            <h1>Forum jQuery</h1>
            <h2>
                <a href="">Lien</a>
            </h2>
        </hgroup>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<div id="agence">
    Infos Agence :<br />
    <input type="text" name="siret" placeholder="Numéro de SIRET" required class="siret" /><br />
    <input type="text" name="nom_agence" placeholder="Nom de l'agence" required /><br />
    <input type="text" name="adresse" placeholder="Adresse de l'agence" required /><br />
    <input type="text" name="cp" placeholder="Code postal" required /><br />
    <input type="text" name="ville" placeholder="Ville" required /><br /><br />
</div>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer itemscope itemtype="http://danielhagnoul.developpez.com/">
        <time datetime="2014-01-11T10:09:18.884+0100" pubdate>2014-01-11T10:09:18.884+0100</time>
        <span itemprop="name">Daniel Hagnoul</span>
        <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
        <a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
        <a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
        <a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
    </footer>
    <script>
        "use strict";
 
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", "jquery", "jqueryui", "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
var dataset = [
    { "label" : "48805738100060", "value" : "Cabanis les routes", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100061", "value" : "Cabanis les routes 1", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100062", "value" : "Cabanis les routes 2", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100063", "value" : "Cabanis les routes 3", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" }
];
 
$( "input[name='siret']", "#agence" ).autocomplete({
    source: dataset,
    minLength: 2,
    select: function( event, ui ) {
        $( this ).val( ui.item.label );
        $( "input[name='nom_agence']", "#agence" ).val( ui.item.value );
        $( "input[name='adresse']", "#agence" ).val( ui.item.rue );
        $( "input[name='cp']", "#agence" ).val( ui.item.cp );
        $( "input[name='ville']", "#agence" ).val( ui.item.ville );
        return false;
    }
});
 
/* Fin code du test */
 
            if ( debugBool ){
                console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    ".conteneur", "#agence", "input[name='siret']", "input[name='nom_agence']", 
                    "input[name='adresse']", "input[name='cp']", "input[name='ville']"
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture", "agence"
                ] );
            }
 
        });
    </script>
</body>
</html>

**PIEPLU** · 21/01/2014, 14h23

Bien joué !!!

Par contre, j'ai mis le SIRET, sélectionné, j'ai bien les données. Si je remonte modifier le SIRET, il faudrait que ca supprime les données affichées ? C'est jouable ?

Merci

**danielhagnoul** · 21/01/2014, 23h13

Bonsoir

Il y a un événement "change" mais il faut que l'utilisateur efface le contenu et clique en dehors pour qu'il s'active, de plus cela ne fonctionne pas à chaque coup dans ma page de test avec Chrome et Firefox.

Il y a une autre solution, qui fonctionne très bien, ajouter une ligne dans le dataset.

Dans l'exemple ci-dessous, lorsque l'on sélectionne "effacer" on efface le contenu de tous les inputs.

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
var dataset = [
    { "label" : "effacer", "value" : "", "rue" : "", "cp" : "", "ville" : "" },
    { "label" : "48805738100060", "value" : "Cabanis les routes", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100061", "value" : "Cabanis les routes 1", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100062", "value" : "Cabanis les routes 2", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" },
    { "label" : "48805738100063", "value" : "Cabanis les routes 3", "rue" : "75 Avenue Clovis Hugues", "cp" : "14000", "ville" : "Caen" }
];
 
var jObjNom = $( "input[name='nom_agence']", "#agence" ),
    jObjAdresse = $( "input[name='adresse']", "#agence" ),
    jObjCp = $( "input[name='cp']", "#agence" ),
    jObjVille = $( "input[name='ville']", "#agence" );
 
$( "input[name='siret']", "#agence" ).autocomplete({
    source: dataset,
    minLength: 2,
    select: function( event, ui ) {
 
        if ( ui.item.label === "effacer" ){
            $( this ).val( "" );
        } else {
            $( this ).val( ui.item.label );
        }
 
        jObjNom.val( ui.item.value );
        jObjAdresse.val( ui.item.rue );
        jObjCp.val( ui.item.cp );
        jObjVille.val( ui.item.ville );
        return false;
    }
});

**PIEPLU** · 22/01/2014, 09h20

Oué, c'est pas tip top du coup.

Je vais chercher à améliorer ça. Peut être verrouiller les champs input si on a choisi un SIRET dans la liste.

**danielhagnoul** · 22/01/2014, 10h04

J'avais compris que c'était l'utilisateur qui devait pouvoir effacer.

Dans le code, pour bloquer toute modification, il y a l'attribut "disabled", on doit le mettre en place et le modifier avec la méthode prop(), exemple : $( "input[name='adresse']", "#agence" ).prop( "disabled", true ); ou $( "input[name='adresse']", "#agence" ).prop( "disabled", false );.

**PIEPLU** · 22/01/2014, 13h47

Mais la propriété prop, c'est en complément de val ?

**danielhagnoul** · 22/01/2014, 15h43

val() et prop() sont deux méthodes différentes : http://api.jquery.com/prop/

C'est indépendant du code pour le fonctionnement de UI Autocomplete.

Peut être verrouiller les champs input si on a choisi un SIRET dans la liste

Le moment adéquat pour verrouiller, vous êtes le seul à pouvoir le déterminer. Sans doute lorsque l'utilisateur a terminé de remplir correctement tous les champs du formulaire.

Autocomplete et jQuery

jQuery

Discussions similaires

Partager

Partager