11540 sujets

JavaScript, DOM et API Web HTML5

Liste déroulante adaptative

Bonjour.

Je me suis bricolé une petite appli Web pour gérer ma cave. J'ai un formulaire de recherche de vins avec plusieurs listes déroulantes (appellation, robe, type...). J'aimerais que le contenu des listes s'adapte en fonction de ce que le formulaire de recherche retourne (un peu à la manière des filtres sous Excel). Par exemple, aujourd'hui je n'ai que des champagnes blancs dans ma cave, pas de rosés ni d'autres vins effervescents. Si je fais une recherche sur tous les vins effervescents, j'aimerais que la liste "robe" n'affiche que "blanc", pas "rouge" ou "rosé".
Je pense passer par de l'Ajax pour faire ça, mais j'aimerais avoir votre avis.
oui il faut nous dire la techno.

c'est pas compliquer a faire, mais savoir si tu fais tous en javascript et des fichiers xml ou si tu utilise un base de données du coup pourquoi pas ajax.
après si tu pouvais être plus explicite.

car là je comprend que tu veux que le contenue de liste déroulante soit "dynamique",

en fonction d'une recherche.

pour cela oui c'est bien de l'ajax (vu que tu utilise du PHP).
Exemple avec avec un formulaire contenant un champ texte, et une liste déroulante qui se remplis via ce que j'ai saisie dans le champs, après un clic sur le bouton . (imagine le formulaire, parce que là je vais te montrer uniquement l'ajax)

       // function qui se déclenche lors du clic 
	function showKws(str) {
       //str est ce que j'ai saisi dans le champ texte
       var item=""; // contiendra ma future liste déroulante
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
      
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // si la reponse ajax est terminer 
				var item = xmlhttp.responseText;
				document.getElementById("id_liste_déroulante_balise_select").innerHTML = item; // on insère par exemple les <option> dans la balise select
			}
		}
		xmlhttp.open("POST","monchemin/fichier.php",true); // le chemin du fichier php 
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("name="+str);   // ce que j'ai saisi dans le champ texte
	}


Ici on a le biais entre le formulaire html, et le fichier php. l'ajax sert a envoyer l'information vers le fichier php, et a recevoir le résultat par exemple d'un "echo" en php.

Ici on pourrait très bien imaginer que l'echo en php contient tout les balise <option> d'un select (suffit de faire un while sur ta requête
par exemple
		while ($resultat= $resultats->fetch()) // on récupére le résultat d'une requete select
		{    
		 echo '<option>'.$resultat->texte.'';
		}


. et il suffit dont d'insérer les options (via ajax et le retour de résultat grace au echo) dans la balise contenant id_liste_déroulante_balise_select (comme indiqué dans le code ajax)
Modifié par JENCAL (11 May 2015 - 18:09)
Bonsoir.

Merci pour l'info et l'exemple. Je connais un peu AJAX pour l'avoir déjà utilisé une ou deux fois sur des cas simples.
J'hésitais en fait surtout entre 4 solutions :
1 - recharger toute la page et tout faire via PHP
2 - mettre à jour l'affichage et les différentes listes de filtres uniquement en JS
3 - mettre à jour l'affichage et les différentes listes de filtres via AJAX
4 - mettre à jour l'affichage en JS et les différentes listes de filtres via AJAX

La solution 2 me paraissait pas mal dans la mesure où, par défaut, la page s'affiche initialement avec tous les éléments, sans aucun filtre. Je n'ai donc a priori pas besoin d'interagir avec le serveur pour récupérer des informations, mais je crains que le masquage/démasquage tout en JS fasse un peu bricolage et soit peu maintenable.
Sujet clos
Aller à