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); |
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 */ }); }); |