Sujet Précédent Sujet Suivant

Système de filtre pour div

Résolu/Fermé
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 - 22 févr. 2015 à 21:50
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 - 24 févr. 2015 à 17:43
Bonjour,
J'ai fais des recherches pour un système de filtre, je suis tomber sur celui de jquery mobile.

https://demos.jquerymobile.com/1.1.1/docs/lists/lists-search-filtertext.html

un input type texte pour écrire les "mots clé".
un attibut (data-filtertext="") qui est sur les div et qui contient les "mots clé" de recherche.

C'est pile se que je voulais mais voilà pour l'utiliser faut mettre le script de jquery mobile et sa adapte toute la page pour mobile.
Je voudrais savoir si vous connaissez un script qui permettrai de faire la même chose

Merci de vos réponse.

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
22 févr. 2015 à 23:52
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/

0
Réponse 2 / 4
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 6
23 févr. 2015 à 18:12
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: 
<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.
0
Réponse 3 / 4
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
23 févr. 2015 à 18:26 
  $('[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();
    });

0
Réponse 4 / 4
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 6
23 févr. 2015 à 20:36
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
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
23 févr. 2015 à 22:46
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
0
florire Messages postés 151 Date d'inscription lundi 15 juillet 2013 Statut Membre Dernière intervention 15 juillet 2022 6
24 févr. 2015 à 17:43
J'ai réussi !
J'ai rajouter "trim()" avant le "split()" pour éviter l'affichage de toute les div dès que l'on met un espace.
Le résultat est exactement ce que je voulais :)
Encore merci de ton aide
0

Discussions similaires

peripherique systeme de base windows 10
manto -
kaneagle -

29 réponses
comment contourner la fonction FILTRE
Gabby -
DjiDji59430 -

3 réponses
trop grand pour le système de fichier de destination
frins -
Kass -

51 réponses
Système d'exploitation 32 bits, processeur x64
Laurent1998480 -
gugu59 -

17 réponses
Le fichier est trop grand pour le systeme ...
jordan009 -
petit papa Noêl -

4 réponses