Onglet Recherche
Greezy51
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
miramaze Messages postés 1429 Date d'inscription Statut Contributeur Dernière intervention -
miramaze Messages postés 1429 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour à tous,
Je voulais savoir comment faire une recherche en fonction d'un choix dans une liste déroulante, je m'explique :
J'ai 1 table avec 3 champs 'ID', 'Pays', 'Ville' sur phpmyadmin, et je voudrais faire une page avec une liste déroulante sur les pays, l'utilisateur choisit le pays dans la liste et appuie sur valider, ça lui affiche toutes les villes du pays qu'il a sélectionner, si par exemple, il sélectionne la France, ça lui affiche "PARIS, MARSEILLE, LYON, LILLE'...". Le top, ce serait que le résultat s'affiche sur la même page..
Merci !
Je voulais savoir comment faire une recherche en fonction d'un choix dans une liste déroulante, je m'explique :
J'ai 1 table avec 3 champs 'ID', 'Pays', 'Ville' sur phpmyadmin, et je voudrais faire une page avec une liste déroulante sur les pays, l'utilisateur choisit le pays dans la liste et appuie sur valider, ça lui affiche toutes les villes du pays qu'il a sélectionner, si par exemple, il sélectionne la France, ça lui affiche "PARIS, MARSEILLE, LYON, LILLE'...". Le top, ce serait que le résultat s'affiche sur la même page..
Merci !
A voir également:
- Onglet Recherche
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Raccourci rouvrir onglet fermé - Guide
- Rechercher ou entrer l'adresse mm - recherche google - Guide
- Recherche photo - Guide
- Je recherche une chanson - Guide
1 réponse
Hello,
voici la partie qui pourrait être faite côté javascript : https://jsfiddle.net/2fnvqrjj/10/ . Côté design, c'est simpliste mais fonctionnel, je me suis pas cassé la tête.
Dans le fiddle, j'ai mis des données bidons pour avoir un exemple concret qui marche côté navigateur. Dans le js ci-dessous, je reprends le code du js du fiddle en changeant le code de la fonction fetch pour qu'il puisse récupérer des vrais données d'une API (je n'ai pas testé si il n'y a pas d'erreurs).
Dans l'exemple ci dessous, si on veut récupérer toutes les villes correspondant à la france par exemple, on va envoyer une requête avec l'url http://monsite.com/towns/fr, derrière le backend va faire une query dans notre base en utilisant le paramètre fr pour récupérer les villes qui correspondent à la France et renvoyer un JSON qui sera la liste des villes à afficher.
Evidemment, ces exemples sont à adapter en fonction de la manière dont tu as modélisé tes données dans ta base et des tes urls.
voici la partie qui pourrait être faite côté javascript : https://jsfiddle.net/2fnvqrjj/10/ . Côté design, c'est simpliste mais fonctionnel, je me suis pas cassé la tête.
Dans le fiddle, j'ai mis des données bidons pour avoir un exemple concret qui marche côté navigateur. Dans le js ci-dessous, je reprends le code du js du fiddle en changeant le code de la fonction fetch pour qu'il puisse récupérer des vrais données d'une API (je n'ai pas testé si il n'y a pas d'erreurs).
Dans l'exemple ci dessous, si on veut récupérer toutes les villes correspondant à la france par exemple, on va envoyer une requête avec l'url http://monsite.com/towns/fr, derrière le backend va faire une query dans notre base en utilisant le paramètre fr pour récupérer les villes qui correspondent à la France et renvoyer un JSON qui sera la liste des villes à afficher.
Evidemment, ces exemples sont à adapter en fonction de la manière dont tu as modélisé tes données dans ta base et des tes urls.
<div class="container">
<h4 class="text-center">Application</h4>
<form>
<div class="form-group">
<label for="country">Pays</label>
<select id="country" name="country" class="form-control">
<option value="">Choisissez un pays</option>
<option value="be">Belgique</option>
<option value="es">Espagne</option>
<option value="fr">France</option>
</select>
</div>
<div class="form-group">
<label for="town">Ville</label>
<select id="town" name="town" class="form-control" disabled>
<option>Pas de villes</option>
</select>
</div>
</form>
</div>
var townUpdater = {
country: undefined,
towns: [],
fetch: function () {
$.get("http://monsite.com/towns/" + this.country, function (data) {
this.towns = JSON.parse(data);
});
this.render();
},
render: function () {
$("#town").removeAttr("disabled");
$("#town").text("");
if (this.towns.length === 0) {
$("#town").append("<option>Pas de villes</options>");
$("#town").attr("disabled", "disabled");
return;
}
for (var i = 0; i < this.towns.length; i++) {
var option = $('<option></option>');
option.text(this.towns[i]);
$('#town').append(option);
}
},
initEventHandler: function () {
$('#country').change(function (event) {
this.country = $("#country option:selected").val();
this.fetch();
}.bind(this));
}
};
townUpdater.initEventHandler();