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

Mode arborescent

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

+ 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