système de filtre pour div Résolu/Fermé

Question

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.

jordane45 · Answer

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/

florire · Answer

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:

aa

bb

cc

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.

jordane45 · Answer

$('[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();
    });

florire · Answer

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

Système de filtre pour div

4 réponses

Discussions similaires