IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Responsable telephonie
    Inscrit en
    Décembre 2006
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Responsable telephonie

    Informations forums :
    Inscription : Décembre 2006
    Messages : 119
    Par défaut Autocomplétion de plusieurs input par numéro de tel
    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 : 1112
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
    Fichiers attachés Fichiers attachés

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre confirmé
    Homme Profil pro
    Responsable telephonie
    Inscrit en
    Décembre 2006
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Responsable telephonie

    Informations forums :
    Inscription : Décembre 2006
    Messages : 119
    Par défaut
    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

  4. #4
    Membre confirmé
    Homme Profil pro
    Responsable telephonie
    Inscrit en
    Décembre 2006
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Responsable telephonie

    Informations forums :
    Inscription : Décembre 2006
    Messages : 119
    Par défaut
    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 : 989
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

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Membre confirmé
    Homme Profil pro
    Responsable telephonie
    Inscrit en
    Décembre 2006
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Responsable telephonie

    Informations forums :
    Inscription : Décembre 2006
    Messages : 119
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [OpenOffice][Tableur] Comment trier numéros sur plusieurs colonnes par ordre croissant
    Par bordelaplage dans le forum OpenOffice & LibreOffice
    Réponses: 8
    Dernier message: 10/04/2015, 23h16
  2. Autocomplétion avec plusieurs inputs
    Par Doldz dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 09/06/2009, 09h00
  3. [DirectPlay] plusieurs clients par IP..
    Par k'n1 dans le forum DirectX
    Réponses: 4
    Dernier message: 21/02/2005, 02h26
  4. Réponses: 4
    Dernier message: 02/09/2004, 21h43
  5. Remplacer plusieurs colonnes par un 'alias'
    Par zestrellita dans le forum Langage SQL
    Réponses: 7
    Dernier message: 22/04/2004, 16h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo