Autocomplétion de plusieurs input par numéro de tel

**maxredphenix** · 30/01/2013, 18h59

Bonsoir tout le monde,

J'ai suivie le tuto ci-dessous pour faire ma propre page d’autocomplétion:
http://x-zolezzi.developpez.com/tuto...utocompletion/

Mon but étant de faire une autcomplétion de plusieurs champs en fonction d'un numéro de téléphone.

Code html :

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

1
2
3
4
5
6
7
<form action="#">
	Numero :<input type="text" id="tel"/><br><br>
	Nom : <input type="text" id="nom" /><br><br>
	Batiment :<input type="text" id="batiment"/><br><br>
	Local : <input type="text" id="local" /><br><br>
	Service :<input type="text" id="service"/>
</form>

Malheureusement cela ne fonctionne pas, j'ai même pas un affichage des 10 résultats lors de la saisie du numéro.

Voila à quoi ressemble mon code sql:

Code sql :

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
---- Structure de la table `annuaire_pabx`
--
 
CREATE TABLE IF NOT EXISTS `annuaire_pabx` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `numero` int(11) NOT NULL,
  `nom` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `service` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `batiment` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
  `local` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5473 ;
 
--
-- Contenu de la table `annuaire_pabx`
--
 
INSERT INTO `annuaire_pabx` (`id`, `numero`, `nom`, `service`, `batiment`, `local`) VALUES
(1, 37628, 'MARTIN', 'Service1', 'B001', 'C109'),
(2, 35432, 'DUPOND', 'Service2', 'B002', '2'),
(3, 34001, 'LEON', 'Service3', 'B003', '217'),
(4, 34002, 'DUPONT', 'Service4', 'B004', '215'),
(5, 34003, 'DAVID', 'Service5', 'B005', '216'),
(6, 35442, 'DURANT', 'Service6', 'B006', '58DEH'),
(7, 34006, 'ROBERT', 'Service7', 'B007', 'B45'),
(8, 34013, 'POIRIER', 'Service8', 'B008', 'A112'),
(9, 34014, 'THOMAS', 'Service9', 'B009', '112'),
(10, 34015, 'LEROY', 'Service10', 'B010', 'A10');

Voila ma page d'index:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head >
		<title>AutoCompletion</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
		<script type="text/javascript">
			var cache = {};
			$(function (){
				// Nous déclarons notre autocomplétion sur les 5 champs suivant:
				$("#tel, #nom, #batiment, #service, #local").autocomplete({
					source: function (request, response){
						//Si la réponse est dans le cache
						if (request.term in cache){
							response($.map(cache[request.term], function (item){
								return {
									label: item.numero + ", " + item.nom,
									value: function (){
										if ($(this).attr('id') == 'tel'){
											$('#nom').val(item.Nom);return item.Numero;
										}
										else{
											$('#tel').val(item.Numero);return item.Nom;
										}
									}
								}
							}));
						}else{
							//Sinon -> Requete Ajax vers le serveur (récupération données en JSON)
							var objData = {};
							// On envoie le début du numéro (4 chiffres) et on défini un retour de 10 résultats max.
							if ($(this.element).attr('id') == 'tel'){
								objData = { Numero: request.term, maxRows: 10 };
							}else{
								objData = { Nom: request.term, maxRows: 10 };
							}
							// Pour le fonctionnement de l'autocomplétion JQUERy a besoin d'un tableau objet au format
							// [{label :'…', value :'…'},{…}]
							// où label correspond à la valeur qui sera affichée dans la liste des propositions
							// et value à la valeur qu'il y aura dans le champ une fois la ligne sélectionnée.
							$.ajax({
								url: "./AutoCompletion.php",
								dataType: "json",
								data: objData,
								type: 'POST',
								success: function (data){
									// Ajout de reponse dans le cache à partir des données JSON reçu depuis le serveur
									cache[(request.term)] = data;
									response($.map(data, function (item){ 
										return {
											// On affiche lors de la saisie le numéro + nom + batiment
											label: item.Numero + ", " + item.Nom + ", " + item.Batiment,
											value: function (){
												if ($(this).attr('id') == 'tel'){
													// Si on a choisi dans l'input des noms alors on rempli l'input numéro
													$('#nom').val(item.Nom); return item.Numero;
												}else{
													// Sinon : inversement
													$('#tel').val(item.Numero);return item.Nom;
												}
											}
										}
									}));
								}
							});
						}
					},
					// L'autocomplétion a une option de délai de 600milliseconde 
					// + une longueur minimale de 4 caractères sur les 5 du plan de numérotation PABX pour éviter de trop surcharger le serveur
					minLength: 4,
					delay: 600
				});
			});
		</script>
		<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
	</head>
	<body>
		<form action="#">
			Numero :<input type="text" id="tel"/><br><br>
			Nom : <input type="text" id="nom" /><br><br>
			Batiment :<input type="text" id="batiment"/><br><br>
			Local : <input type="text" id="local" /><br><br>
			Service :<input type="text" id="service"/>
		</form>
	</body>
</html>

Et un screenshot de la page dans firefox avec la console web:
Nom : Erreur Autocompete.jpg
Affichages : 1107
Taille : 67,3 Ko

J'ai mis dans les fichiers attachés toutes les pages nécessaires.

Si quelqu'un a une idée je suis preneur parce la je vois pas du tout, j'ai suivie le tuto donc logiquement ça devrait être bon....

Merci d'avance

maxredphenix

**danielhagnoul** · 31/01/2013, 01h33

Bonsoir

Première remarque, la version de jQuery est obsolète par rapport à celle de jQuery UI. Vous devez utiliser au minimum jQuery 1.8.3.

Nota bene : pour jQuery UI, la version JS (1.8.10) ne correspond pas à la version CSS (1.8.9).

Si la transaction AJAX est réussie (success), le contenu de "data" sert à construire un "array" ($.map()) contenant les données qui seront cherchées par l'utilisateur.

C'est dans la méthode "select" que l'on doit traiter le choix de l'utilisateur. La méthode est absente !

Voir la démonstration : http://jqueryui.com/autocomplete/#remote-jsonp

**maxredphenix** · 31/01/2013, 18h47

Bonjour,

Tout d'abord merci pour la réponse.

C'est vrai que j'ai pas fait gaffe à la version de jquery, voila qui est changé:

Code html :

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

1
2
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

Je vais regarder votre lien ce soir et regarder le fonctionnement avec la méthode select. Par contre c'est bizarre que dans le tuto ça fonctionne?

Je vous tiens au courant

Encore merci et bonne soirée

**maxredphenix** · 31/01/2013, 22h57

La j'ai un peu de mal.....

Déjà j'ai pas ma fonction qui commence par :

Code :

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

1
2
<script type="text/javascript">
		$( "#numero" ).autocomplete({

Dans l'exemple il commence ainsi? De plus j'aimerai avoir une autocomplétion qui se fait en fonction soit du champ "numero" soit du champ "nom", et je sais pas si cela est possible

. Est-ce que déjà c'est réalisable dans un seul et même script ou dois-je passer par deux autocompletes différents?

Sinon j'ai tenter de récupérer les valeurs pour les insérer dans les inputs mais c'est pas encore ça:

Code :

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

1
2
3
4
5
6
7
8
minLength: 4,
delay: 600,
select: function( event, ui ) {
	$("#nom").val(ui.item.label);
	$("#batiment").val(ui.item.label);
	$("#local").val(ui.item.label);
	$("#service").val(ui.item.label);
},

J'ai voulu faire un test avec un alert affichant le résultat du UI mais rien:

Code :

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

1
2
3
select: function( event, ui) {
    alert('type : '+typeof(ui)+'\ncontenu : '+ui);
}

En fait, je reste figé à ceci:
Nom : erreur.jpg
Affichages : 983
Taille : 117,8 Ko

Je devrais normalement avoir les résultats suivants:
34001, 'LEON', 'Service3', 'B003', '217'

Voila mon nouveau code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head >
		<title>AutoCompletion</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
		<!-- Icone de loading après la saisie des 4 premiers caractères. -->
		<style>
		  .ui-autocomplete-loading {
			background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
		  }
		</style>
		<script type="text/javascript">
			var cache = {};
			$(function (){
				// Nous déclarons notre autocomplétion sur les 5 champs suivant:
				$("#tel, #nom, #batiment, #service, #local").autocomplete({
					source: function (request, response){
						//Si la réponse est dans le cache
						if (request.term in cache){
							response($.map(cache[request.term], function (item){
								return {
									label: item.numero + ", " + item.nom + ", " + item.batiment,
									value: function (){
										if ($(this).attr('id') == 'tel'){
											$('#nom').val(item.Nom);return item.Numero;
										}
										else{
											$('#tel').val(item.Numero);return item.Nom;
										}
									}
								}
							}));
						}else{
							//Sinon -> Requete Ajax vers le serveur (récupération données en JSON)
							var objData = {};
							// On envoie le début du numéro (4 chiffres) et on défini un retour de 10 résultats max.
							if ($(this.element).attr('id') == 'tel'){
								objData = { Numero: request.term, maxRows: 10 };
							}else{
								objData = { Nom: request.term, maxRows: 10 };
							}
							// Pour le fonctionnement de l'autocomplétion JQUERy a besoin d'un tableau objet au format
							// [{label :'…', value :'…'},{…}]
							// où label correspond à la valeur qui sera affichée dans la liste des propositions
							// et value à la valeur qu'il y aura dans le champ une fois la ligne sélectionnée.
							$.ajax({
								url: "./AutoCompletion.php",
								// Définition du type de données que l'on reçoit de la part de AutocCompletion.php
								dataType: "json",
								data: objData,
								type: 'POST',
								// En cas de succès de récupération de données JSON depuis AutocCompletion.php
								success: function (data){
									// Ajout de reponse dans le cache à partir des données JSON reçu depuis le serveur
									cache[(request.term)] = data;
									response($.map(data, function (item){ 
										return {
											// On affiche lors de la saisie le numéro + nom + batiment
											label: item.Numero + ", " + item.Nom + ", " + item.Batiment,
											value: function (){
												if ($(this).attr('id') == 'tel'){
													// Si on a choisi dans l'input des noms alors on rempli l'input numéro
													$('#nom').val(item.Nom); return item.Numero;
												}else{
													// Sinon : inversement
													$('#tel').val(item.Numero);return item.Nom;
												}
											}
										}
									}));
								}
							});
						}
					},
					// L'autocomplétion a une option de délai de 600milliseconde 
					// + une longueur minimale de 4 caractères sur les 5 du plan de numérotation PABX pour éviter de trop surcharger le serveur
					minLength: 4,
					delay: 600,
					select: function( event, ui ) {
						alert('type : '+typeof(ui)+'\ncontenu : '+ui)
					},
				});
			});
		</script>
		<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
	</head>
	<body>
		<form action="#">
			Numero :<input type="text" id="tel"/><br><br>
			Nom : <input type="text" id="nom" /><br><br>
			Batiment :<input type="text" id="batiment"/><br><br>
			Local : <input type="text" id="local" /><br><br>
			Service :<input type="text" id="service"/>
		</form>
	</body>
</html>

Si vous pouviez m'aider, j'avoue que je serais très content.

Merci d'avance

maxredphenix

**danielhagnoul** · 02/02/2013, 00h15

Bonsoir

Un exemple statique :

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="fr" manifest="http://danielhagnoul.developpez.com/pageTest.mf">
<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/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0b1.js",
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/i18n/jquery-ui-i18n.min.js",
			{ "jqui" : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" },
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1303618/webmasters-developpement-web/\
				javascript/bibliotheques-frameworks/jquery/\
				autocompletion-plusieurs-input-numero-tel/#post7101865">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<form action="#">
			Numero :<input type="text" id="tel"/><br><br>
			Nom : <input type="text" id="nom" /><br><br>
			Batiment :<input type="text" id="batiment"/><br><br>
			Local : <input type="text" id="local" /><br><br>
			Service :<input type="text" id="service"/>
		</form>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-02-01T22:59:24.468+01:00" pubdate>2013-02-01T22:59:24.468+01:00</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";
 
		head( "jqui", function(){ // Voir : http://headjs.com/
 
			/*
			 * Mon but étant de faire une autcomplétion de 
			 * plusieurs champs en fonction d'un numéro 
			 * de téléphone.
			 */
		    var data = [
		    	{
		    		"label" : "37628",
		    		"value" : {
		    			"numero" : 37628,
		    			"nom" : 'MARTIN',
		    			"service" : 'Service1',
		    			"batiment" : 'B001',
		    			"local" : 'C109'
		    		}
		    	},
		    	{
		    		"label" : "35432",
		    		"value" : {
		    			"numero" : 35432,
		    			"nom" : 'DUPOND',
		    			"service" : 'Service2',
		    			"batiment" : 'B002',
		    			"local" : '2'
		    		}
		    	},
		    	{
		    		"label" : "34001",
		    		"value" : {
		    			"numero" : 34001,
		    			"nom" : 'LEON',
		    			"service" : 'Service3',
		    			"batiment" : 'B003',
		    			"local" : '217'
		    		}
		    	},
		    	{
		    		"label" : "34002",
		    		"value" : {
		    			"numero" : 34002,
		    			"nom" : 'DUPONT',
		    			"service" : 'Service4',
		    			"batiment" : 'B004',
		    			"local" : '215'
		    		}
		    	},
		    	{
		    		"label" : "34003",
		    		"value" : {
		    			"numero" : 34003,
		    			"nom" : 'DAVID',
		    			"service" : 'Service5',
		    			"batiment" : 'B005',
		    			"local" : '216'
		    		}
		    	},
		    	{
		    		"label" : "35442",
		    		"value" : {
		    			"numero" : 35442,
		    			"nom" : 'DURANT',
		    			"service" : 'Service6',
		    			"batiment" : 'B006',
		    			"local" : '58DEH'
		    		}
		    	},
		    	{
		    		"label" : "34006",
		    		"value" : {
		    			"numero" : 34006,
		    			"nom" : 'ROBERT',
		    			"service" : 'Service7',
		    			"batiment" : 'B007',
		    			"local" : 'B45'
		    		}
		    	},
		    	{
		    		"label" : "34013",
		    		"value" : {
		    			"numero" : 34013,
		    			"nom" : 'POIRIER',
		    			"service" : 'Service8',
		    			"batiment" : 'B008',
		    			"local" : 'A112'
		    		}
		    	},
		    	{
		    		"label" : "34014",
		    		"value" : {
		    			"numero" : 34014,
		    			"nom" : 'THOMAS',
		    			"service" : 'Service9',
		    			"batiment" : 'B009',
		    			"local" : '112'
		    		}
		    	},
		    	{
		    		"label" : "34015",
		    		"value" : {
		    			"numero" : 34015,
		    			"nom" : 'LEROY',
		    			"service" : 'Service10',
		    			"batiment" : 'B010',
		    			"local" : 'A10'
		    		}
		    	}
		    ];
 
		    $( "#tel" ).autocomplete({
		    	"source" : data,
		    	"focus" : function( event, ui ){
		    		$( "#tel" ).val( ui.item.label );
                                return false;
		    	},
		    	"select" : function( event, ui ){
		    		var obj = ui.item.value;
 
					$( "#tel" ).val( obj.numero )
		    		$( "#nom" ).val( obj.nom );
		    		$( "#batiment" ).val( obj.batiment );
		    		$( "#local" ).val( obj.local );
		    		$( "#service" ).val( obj.service );
 
		    		return false;
		    	}
		    });
 
		});
	</script>
</body>  
</html>

Il faut autant d'autocomplete que de critères de recherche.

Si vous souhaitez faire une recherche à partir du nom, il vous faudra un autre autocomplete avec le nom placé en label dans "data".

Le serveur doit fournir directement un array conforme au modèle "data" de mon exemple statique, ou vous devez le construire à partir des données transmises par le serveur.

**maxredphenix** · 03/02/2013, 00h18

Merci pour la réponse,

C'est super bien fait comme démo avec votre logo, et en plus j'ai appris un truc avec headjs (je connaissais pas du tout, ça a l'air pas mal).

J'ai tenté de modifier mon code à partir de votre code et de la page de démo JQUERY mais c'est encore pire qu'avant, j'ai même plus ma requête ajax qui se lance:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head >
		<title>AutoCompletion</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
		<!-- Icone de loading après la saisie des 4 premiers caractères. -->
		<style>
		  .ui-autocomplete-loading {
			background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
		  }
		</style>
		<script type="text/javascript">
			$(function (){
				// Nous déclarons notre autocomplétion à partir des 2 champs suivant:
				$("#tel").autocomplete({
					source: function (request, response){
						// Requete Ajax vers le serveur (récupération données en JSON)
						var objData = {};
						// On envoie le début du numéro (4 chiffres) et on défini un retour de 10 résultats max.
						if ($(this.element).attr('id') == 'tel'){
							objData = {Numero: request.term, maxRows: 10 };
						}
						// Pour le fonctionnement de l'autocomplétion JQUERY a besoin d'un tableau objet au format: [{label :'…', value :'…'},{…}]
						// où LABEL = la valeur dans la liste des propositions et VALUE la valeur dans le champ une fois la ligne sélectionnée.
						$.ajax({
							url: "./AutoCompletion.php",
							// Définition du type de données que l'on reçoit de la part de AutocCompletion.php
							dataType: "json",
							data: objData,
							type: 'POST',
							focus : function( event, ui ){
								$( "#tel" ).val( ui.item.label ); return false;
							},
							// En cas de succès de récupération de données JSON depuis AutocCompletion.php
							success: function (data){
								response($.map(data, function (item){ 
									return {
										// On affiche lors de la saisie le numéro + nom + batiment
										label: item.Numero + ", " + item.Nom + ", " + item.Batiment,
										value: item.name
									}
								}
							}));
						}
					});
				},
				// L'autocomplétion a une option de délai de 600milliseconde 
				// + une longueur minimale de 4 caractères sur les 5 du plan de numérotation PABX pour éviter de trop surcharger le serveur
				minLength: 4,
				delay: 600,
				select : function( event, ui ){
					var obj = ui.item.value;
					$( "#tel" ).val( obj.numero )
					$( "#nom" ).val( obj.nom );
					$( "#batiment" ).val( obj.batiment );
					$( "#local" ).val( obj.local );
					$( "#service" ).val( obj.service );
					return false;
				}
			});
		});
		</script>
		<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
	</head>
	<body>
		<form action="#">
			Numero :<input type="text" id="tel"/><br><br>
			Nom : <input type="text" id="nom" /><br><br>
			Batiment :<input type="text" id="batiment"/><br><br>
			Local : <input type="text" id="local" /><br><br>
			Service :<input type="text" id="service"/>
		</form>
	</body>
</html>

Et sinon, si j'ai j'ai bien compris, dès que ce code sera fonctionnel, il faudra que je fasse le même pour faire une autocompletion avec le champ "nom". C'est dommage qu'on ne puisse pas le faire dans un seul et même code.

En tout cas encore merci de votre aide.

Bon week end.

**maxredphenix** · 04/02/2013, 23h43

Bonsoir,

Je pense que le problème doit se situer dans la partie data.

Pensez-vous qu'il faudrait revoir la définition de la partie "data"?

Merci

**danielhagnoul** · 06/02/2013, 23h26

Bonsoir

Désolé pour le manque de réactivité, mais j'ai été souffrant et je vais juste un peu mieux.

Dans le message n°6, vous avez modifié trop de choses à la fois et introduit plusieurs erreurs. Vous placez la méthode focus() dans la méthode AJAX et vous modifiez le contenu de response() sans tenir compte de la structure de l'array.

Essayer de construire un test dynamique (alimentation de l'autocomplete par le serveur) sans rien modifier à la structure des données et de mon code.

Je vous ai donné une bonne base de départ, c'est à vous de l'exploiter.

**maxredphenix** · 07/02/2013, 13h40

Bonjour et encore une fois merci pour votre réponse,

Pour votre santé, cela ne m’étonne pas, j'ai 3 collègues en arrêt (sympa la grippe

)

Je vais essayer de revoir tout cela en partant de votre modèle statique et je vous tiens au courant ce week end.

C'est dommage que le site jquery ne montre pas d'exemple avec un retour depuis une bdd, parce que cela doit être très souvent utilisé dans ce cas là je pense.

Bon rétablissement et à samedi

Cordialement

Maxredphenix

**maxredphenix** · 09/02/2013, 18h19

Bonjour,

J'ai un peu avancer

, mais j'ai un souci sur le résultat, c'est assez bizarre, j'ai un JSON qui me donne 2 résultats pour chaque numéro et les valeurs du premier sont tous NULL ex:

[{"Numero":null,"Nom":null,"Batiment":null,"Local":null,"Service":null,"numero":"35424","nom":"TEST AUTOCOMPLETE","batiment":"B100","local":"13","service":""}]

Alors qu'il y a bien qu'un numéro d'enregistré dans ma BDD et c'est pareil pour tous les numéros que j'ai testé.

Voila un aperçu de ce que j'ai:

et voila mes codes:
Page INDEX.php:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head >
		<title>AutoCompletion</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
		<!-- Icone de loading après la saisie des 4 premiers caractères. -->
		<style>
		  .ui-autocomplete-loading {
			background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
		  }
		</style>
		<script type="text/javascript">
			$(function (){
				// Nous déclarons notre autocomplétion à partir des 2 champs suivant:
				$("#tel").autocomplete({
					source: function(request, response) {
						$.ajax({
								// Fichier servant à récuperer les valeurs dans la BDD
								url: "AutoCompletion.php",
								// Définition du type de données que l'on reçoit de la part de AutoCompletion.php
								dataType: "json",
								// Valeur que l'on envoie dans le fichier Autocompletion.php pour la requête
								data: {Numero: $("#tel").val(), maxRows: 10},
								// Type d'envoie des données vers le serveur
								type: 'POST',
								// En cas de succès de récupération de données JSON depuis AutocCompletion.php
								success: function (data){
									response($.map(data, function (item){ 
										return {
											// On affiche lors de la saisie le numéro + nom + batiment
											label: item.Numero + ", " + item.Nom + ", " + item.Batiment,
											value: item.Numero
										}
									}));
								}
						});
					},
					// L'autocomplétion a une option de délai de 400milliseconde 
					// + une longueur minimale de 4 caractères sur les 5 du plan de numérotation PABX pour éviter de trop surcharger le serveur
					minLength: 4,
					delay: 400,
					select : function( event, ui ){
						var obj = ui.item.value;
						$( "#tel" ).val( obj.Numero )
						$( "#nom" ).val( obj.Nom );
						$( "#batiment" ).val( obj.Batiment );
						$( "#local" ).val( obj.Local );
						$( "#service" ).val( obj.Service );
						return false;
					},
					open: function() {
						$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
					},
					close: function() {
						$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
					}
				});
			});
		</script>
		<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
	</head>
	<body>
		<form action="#">
			Numero :<input type="text" id="tel"/><br><br>
			Nom : <input type="text" id="nom" /><br><br>
			Batiment :<input type="text" id="batiment"/><br><br>
			Local : <input type="text" id="local" /><br><br>
			Service :<input type="text" id="service"/>
		</form>
	</body>
</html>

Page AutoCompletion.php

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
<?php
require_once('./AutoCompletionNumeroNom.php');
 
//Initialisation de la liste
$list = array();
//Connexion MySQL
try{$db = new PDO('mysql:host=localhost;dbname=mybdd', 'mybdd', 'mybdd');}
catch (Exception $ex){echo $ex->getMessage();}
 
//Construction de la requete
$strQuery = "SELECT numero,nom,batiment,local,service FROM annuaire_pabx WHERE ";
$strQuery .= "numero LIKE :Numero ";
 
//Limite des résultats pour la requête
if (isset($_POST["maxRows"])){$strQuery .= "LIMIT 0, :maxRows";}
 
// Préparation de la requête
$query = $db->prepare($strQuery);
//On dit que la valeur est celle envoyer par POST
$value = $_POST["Numero"]."%";
$query->bindParam(":Numero", $value, PDO::PARAM_STR);
 
//Limite de résulat
if (isset($_POST["maxRows"])){
    $valueRows = intval($_POST["maxRows"]);
    $query->bindParam(":maxRows", $valueRows, PDO::PARAM_INT);
}
// On exécute la requête SQL
$query->execute();
 
// On affecte les valeurs récupérées dans la requête pour les affecter à $list
$list = $query->fetchAll(PDO::FETCH_CLASS, "AutoCompletionNumeroNom");;
 
// On encode les résulats ($list) en JSON et on les renvoie à notre page désirant l'autocomplétion
echo json_encode($list);
?>

Page contenant les variables:

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
// Les propriétés doivent être public pour qu'elle puisse entre lu par la méthode de transformation en JSON.
class AutoCompletionNumeroNom {
	public $Numero;
	public $Nom;
	public $Batiment;
	public $Local;
	public $Service;
}
?>

Est-ce que vous savez d'ou cela peut-il venir?

Merci

**maxredphenix** · 12/02/2013, 20h52

Bonsoir,

Je me suis rendu compte que le résultat JSON obtenu contient 2 résultats pour un même numéro mais les variables dans chaque partie sont différentes. La première partie a des variables commençant par une majuscule et l'autre en minuscule. Seule la partie ayant les variables en minuscule contient le résultat de la BDD, l'autre ne contient que des NULL.

J'ai donc remplacé mon code dans la partie index.php afin de ne choisir que la 2 eme partie soit:

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
			success: function (data){
				response($.map(data, function (item){ 
					return {
						// On affiche lors de la saisie le numéro + nom + batiment
						label: item.numero + ", " + item.nom + ", " + item.batiment,
						value: item.numero
					}
				}));
			}
	});
},
// L'autocomplétion a une option de délai de 400milliseconde 
// + une longueur minimale de 4 caractères sur les 5 du plan de numérotation PABX pour éviter de trop surcharger le serveur
minLength: 4,
delay: 400,
select : function( event, ui ){
	var obj = ui.item.value;
	$( "#tel" ).val( obj.numero )
	$( "#nom" ).val( obj.nom );
	$( "#batiment" ).val( obj.batiment );
	$( "#local" ).val( obj.local );
	$( "#service" ).val( obj.service );
	return false;
},

A partir de la j'obtiens maintenant le résultat suivant dans ma page

Par contre dès que je sélectionne une valeur rien ne se remplie..... mais si je remplie les autres champs et que je recommence l'autocomplete + selection, tous les champs se retrouvent vite donc je pense qu'il sélectionne le resultat NULL

Merci

**danielhagnoul** · 12/02/2013, 22h48

Bonsoir

Votre problème est en PHP.

Le code jQuery manipule data qui doit avoir une structure bien définie, tant que vous construirez en PHP une structure data différente de la mienne cela ne fonctionnera pas.

**maxredphenix** · 12/02/2013, 23h10

Bonsoir et merci,

Je viens de changer la requête sql:

Code :

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

1
2
3
//Construction de la requete
$strQuery = "SELECT numero,nom,service,batiment,local FROM annuaire_pabx WHERE ";
$strQuery .= "numero LIKE :Numero ";

ainsi que le fichier AutoCompletionNumeroNom.php:

Code php :

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

1
2
3
4
5
6
7
8
9
10
<?php
// Les propriétés doivent être public pour qu'elle puisse entre lu par la méthode de transformation en JSON.
class AutoCompletionNumeroNom {
	public $numero;
	public $nom;
	public $service;
	public $batiment;
	public $local;	
}
?>

Maintenant j'obtiens que les valeurs résultantes de la bbd:

Code :

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

[{"numero":"34001","nom":"Nom 1","service":"Service 1","batiment":"B001","local":"217"},{"numero":"34002","nom":"Nom 2","service":"Service 2","batiment":"B002","local":"215"},{"numero":"34003","nom":"Nom 3","service":"Service 3","batiment":"B003","local":"216"},{"numero":"34006","nom":"Nom 5","service":"Service 5","batiment":"B005","local":"B45"},{"numero":"34005","nom":"Nom 4","service":"Service 4","batiment":"B004","local":"205"},{"numero":"34001","nom":"Secretaire Nom 1","service":"Service 1","batiment":"B001","local":"217"}]

Le résultat est donc équivalent à votre structure, mais j'obtiens toujours rien. Si je sélectionne une des valeur alors tout s'efface même le champ contenant le numéro de téléphone.

**danielhagnoul** · 13/02/2013, 00h02

Le résultat n'est pas équivalent mais très proche, il faut juste modifier ce bout de code :

Code :

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

1
2
3
4
5
6
response( $.map( data, function( item ){ 
	return {
		label: item.numero + ", " + item.nom + ", " + item.batiment,
		value: item
	}
}));

**maxredphenix** · 13/02/2013, 19h15

Bonsoir,

C'est bon, je viens de changer mon code avec votre correction et tout fonctionne correctement. J'ai même créer un autre script pour faire la même chose avec le nom.

Je vous remercie encore pour votre aide et le temps que vous avez consacré à m'aider.

Bonne soirée.

Cordialement,

Maxredphenix

Autocomplétion de plusieurs input par numéro de tel [AJAX]

jQuery

Discussions similaires

Partager

Partager