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

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

jQuery : Plusieurs fois le même autocomplete sur une page

Le , par CinePhil

0PARTAGES

Si vous avez une page avec plusieurs contrôles à mettre en autocomplete sur la même source de données, voici la méthode pour ne pas copier plusieurs fois votre code Javascript...

Soit, par exemple, une page avec un fomulaire demandant :
- le pays et la ville de naissance ;
- le pays et la ville de l'adresse actuelle.

Le pays est à choisir dans la liste complète des pays via un contrôle de type <select>.
La ville est une zone de saisie de texte et sera en autocomplete de JQuery UI. Lors de la saisie des premiers caractères de la ville, l'autocomplete demande au serveur les villes commençant par les mêmes lettres en fonction du pays sélectionné.

Côté PHP, pour interroger la base de données et récupérer les villes possibles, le programme est le même pour les deux groupes de contrôles :
Code PHP : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Initialisation de la liste 
$list_villes = array(); 
  
// Récupération des paramètres de recherche 
if(isset($_POST['pays'])) 
{ 
	$idPays = intval($_POST['pays']); 
} 
  
if(isset($_POST['debutVille'])) 
{ 
	$debutVille = $_POST['debutVille']; 
} 
  
// Accès à la BDD et récupération de la liste des villes en fonction du pays choisi 
require_once RACINE.'application/include/bddMysql.php'; 
require_once RACINE.'application/Model/ville.php'; 
$objVille = new ville(); 
  
$liste_villes = $objVille->getVillesParPaysEtDebutNom($idPays, $debutVille); 
  
// Envoi du résultat à la fonction Javascript appelante 
echo json_encode($liste_villes);
=> On voit que ce programme a besoin en entrée de l'identifiant du pays sélectionné et du début du texte tapé dans le champ de la ville (de naissance ou de l'adresse actuelle).

Côté Javascript, le même code est utilisé par les deux contrôles (villeNaissance et villeAdresse). Et on envoie le bon identifiant du pays sélectionné grâce à un switch :
Code Javascript : Sélectionner tout
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
/** 
 * JQuery.ui Autocomplete pour les villes 
 * @abstract : Gère l'autocomplétion lors de la saisie de la ville en fonction du pays pré-sélectionné 
 */ 
$( function() { 
	$("#villeNaissance,#villeAdresse").autocomplete({ 
		source: function(request, response) 
		{ 
			var controle_ville = $(this.element).prop("id"); /* Identifiant du contrôle en cours de saisie de texte */ 
			var controle_pays; /* Contiendra le nom du contrôle du pays correspondant au contrôle ville en cours de saisie */ 
  
			switch (controle_ville) 
			{ 
				case "villeNaissance": 
					controle_pays = "paysNaissance"; 
					break; 
				case "villeAdresse": 
					controle_pays = "paysAdresse"; 
					break; 
			} 
  
			var idPays = $("#"+controle_pays).val(); /* On récupère l'identifiant du pays choisi dans la liste des pays */ 
			var objData = {}; 
  
			objData = {pays: idPays, debutVille: request.term}; /* Les données à transmettre au programme PHP d'interrogation des villes */ 
  
			$.ajax({ 
				url: 'aj_cherche_ville', /* Adaptez l'url d'accès au programme à votre application */ 
				dataType: "json", 
				data: objData, 
				type: 'POST', 
				success: function (liste_villes) /* On récupère une liste de villes en réponse du programme PHP */ 
				{ 
					response($.map(liste_villes, function(item) /* On traite la liste JSON en mettant en forme le résultat pour affichage des possibilités à l'utilisateur */ 
					{ 
						return { 
							label: item.vilNom + '(' + item.vilDpt + ')', /* Construit la liste des possibilités affichées */ 
							value: item.vilNom + '(' + item.vilDpt + ')' /* Détermine la valeur du contrôle après sélection dans la liste */ 
						} 
					})); 
				} 
			}); 
		}, 
		minLength: 3, /* Nombre de lettres mini à saisir avant activation de la recherche en autocomplete */ 
		delay: 600 /* Délai en millisecondes au bout duquel la recherche se lance */ 
	}); 
});

Une erreur dans cette actualité ? Signalez-nous-la !