Système de filtre pour div
Résolu
florire
Messages postés
151
Date d'inscription
Statut
Membre
Dernière intervention
-
florire Messages postés 151 Date d'inscription Statut Membre Dernière intervention -
florire Messages postés 151 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Système de filtre pour div
- Restauration systeme windows 10 - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Vous avez besoin d'une autorisation de la part de système pour modifier ce dossier - Guide
- Filtre whatsapp - Accueil - Messagerie instantanée
- Filtre teams - Accueil - Visio
4 réponses
Bonjour,
Pas besoin d'un script tout fait pour ça...
quelques lignes de code suffisent...
Tu peux t'inspirer de ceci par exemple :
http://jsfiddle.net/jordane45/jfyzn2d2/5/
Pas besoin d'un script tout fait pour ça...
quelques lignes de code suffisent...
Tu peux t'inspirer de ceci par exemple :
http://jsfiddle.net/jordane45/jfyzn2d2/5/
Bonjour,
Merci de ta réponse.
Oui, je me doute que c'est pas très difficile pour quelqu'un qui connait bien le js mais moi je ne suis pas très calé en js.
Ton code étant intéressant je me suis quand même lancer dans sa modification après des recherche plus ou moins longue :D
J'ai réussie a faire à peux près se que je rechercher reste certainement l'étape la plus dur..
mon html:
mon js:
Pas beaucoup de modif mais sa ma pris du temps xD
Le texte taper dans l'input est bien rechercher dans l'attribut "data-filtertext" si j'écris 'gg', il reste bien la div contenant 'aa'.
Mais si j'écris 'hh' seul la div contenant 'bb' s'affiche hors je voudrais que 'aa' s'affiche aussi.
Un peu comme si c'était des mots clé, que les espaces devienne des séparateur.
Et pour faire sa j'ai besoin qu'on me guide un peu si quelqu'un veux bien.
Et par la suite je ferais la même chose sur le texte entré dans l'input (avec se que je viendrais d'apprendre) pour faire une recherche à plusieurs "mot clé".
Merci de votre aide.
Merci de ta réponse.
Oui, je me doute que c'est pas très difficile pour quelqu'un qui connait bien le js mais moi je ne suis pas très calé en js.
Ton code étant intéressant je me suis quand même lancer dans sa modification après des recherche plus ou moins longue :D
J'ai réussie a faire à peux près se que je rechercher reste certainement l'étape la plus dur..
mon html:
<input input_filter="true" type="text"/>
<div data-filter="true">
<div class="select">
<div class="membre" data-filtertext="gg hh">aa</div>
</div>
<div class="select">
<div class="membre" data-filtertext="hh">bb</div>
</div>
<div class="select">
<div class="membre" data-filtertext="vv">cc</div>
</div>
</div>
mon js:
$(window).load(function(){
$('[input_filter="true"]').bind("keyup", function() {
var text = $(this).val().toLowerCase();
var items = $('[data-filter="true"]').children().children();
//first, hide all:
items.parent().hide();
//show only those matching user input:
items.filter(function () {
return $(this).attr("data-filtertext").toLowerCase().indexOf(text) == 0;
}).parent().show();
});
});
Pas beaucoup de modif mais sa ma pris du temps xD
Le texte taper dans l'input est bien rechercher dans l'attribut "data-filtertext" si j'écris 'gg', il reste bien la div contenant 'aa'.
Mais si j'écris 'hh' seul la div contenant 'bb' s'affiche hors je voudrais que 'aa' s'affiche aussi.
Un peu comme si c'était des mots clé, que les espaces devienne des séparateur.
Et pour faire sa j'ai besoin qu'on me guide un peu si quelqu'un veux bien.
Et par la suite je ferais la même chose sur le texte entré dans l'input (avec se que je viendrais d'apprendre) pour faire une recherche à plusieurs "mot clé".
Merci de votre aide.
$('[input_filter="true"]').bind("keyup", function() {
var text = $(this).val().toLowerCase();
var items = $('[data-filter="true"]').children().children();
//first, hide all:
items.parent().hide();
//show only those matching user input:
items.filter(function () {
return $(this).attr("data-filtertext").toLowerCase().indexOf(text) >= 0;
}).parent().show();
});
C'est si bête que sa :o, moi qui réfléchissais à des truc tellement plus compliqué.
Merci de ton aide encore une fois !
Du coup pour la recherche multiple de mot clé faudrait que je coupe la variable "text". Je récupére tous les mots écrit.
Puis je fais une boucle en fonction du nombre de mot clé sur "items.filter[...].show();"
Je suis sur la bonne route ? ou il y a plus simple ? xD
Merci de ton aide encore une fois !
Du coup pour la recherche multiple de mot clé faudrait que je coupe la variable "text". Je récupére tous les mots écrit.
Puis je fais une boucle en fonction du nombre de mot clé sur "items.filter[...].show();"
Je suis sur la bonne route ? ou il y a plus simple ? xD
Ca me semble pas mal.
Pour cela tu peux utiliser un split
https://www.w3schools.com/jsref/jsref_split.asp
Et pour faire la boucle... un EACH
https://api.jquery.com/jquery.each/
... Je te laisse chercher .....
PS; Ta question initiale (et ta seconde également...) étant résolue... merci de clôturer cette discussion.
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)
et pour toute nouvelle question... ouvrir une nouvelle discussion.
Cela facilite les recherches sur le forum.. dans le cas ou d'autres personnes rencontreraient le même souci que toi.
Cordialement,
Jordane
Pour cela tu peux utiliser un split
https://www.w3schools.com/jsref/jsref_split.asp
Et pour faire la boucle... un EACH
https://api.jquery.com/jquery.each/
... Je te laisse chercher .....
PS; Ta question initiale (et ta seconde également...) étant résolue... merci de clôturer cette discussion.
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)
et pour toute nouvelle question... ouvrir une nouvelle discussion.
Cela facilite les recherches sur le forum.. dans le cas ou d'autres personnes rencontreraient le même souci que toi.
Cordialement,
Jordane