Onglet Recherche
Fermé
Greezy51
Messages postés
3
Date d'inscription
mercredi 3 juin 2015
Statut
Membre
Dernière intervention
20 juillet 2015
-
20 juil. 2015 à 15:46
miramaze Messages postés 1429 Date d'inscription mercredi 29 juillet 2009 Statut Contributeur Dernière intervention 1 mai 2022 - 20 juil. 2015 à 22:56
miramaze Messages postés 1429 Date d'inscription mercredi 29 juillet 2009 Statut Contributeur Dernière intervention 1 mai 2022 - 20 juil. 2015 à 22:56
A voir également:
- Onglet Recherche
- Recherche musique - Guide
- Rouvrir onglet fermé - Guide
- Google recherche par image - Guide
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Onglet privé - Guide
1 réponse
miramaze
Messages postés
1429
Date d'inscription
mercredi 29 juillet 2009
Statut
Contributeur
Dernière intervention
1 mai 2022
92
20 juil. 2015 à 22:56
20 juil. 2015 à 22:56
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();
