Voir le flux RSS

Blog de CinéPhil

[Actualité] JQuery : Plusieurs fois le même autocomplete sur une page

Noter ce billet
par , 09/10/2017 à 10h18 (1017 Affichages)
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 - 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
// 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 - 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
/**
 * 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 */
	});
});

Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Viadeo Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Twitter Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Google Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Facebook Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Digg Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Delicious Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog MySpace Envoyer le billet « JQuery : Plusieurs fois le même autocomplete sur une page » dans le blog Yahoo

Mis à jour 09/10/2017 à 13h57 par CinePhil

Catégories
Javascript , Développement Web , PHP , Javascript / Ajax

Commentaires