Filtre "liste" de divs avec Javascript

J'ai un répéteur qui sort des divs comme suit pour chaque élément retourné à partir de quelque méthode.Filtre "liste" de divs avec Javascript

<div class="editor-area"> 
    <div class="title">the title</div> 
    <div>the description</div> 
    <div class="bottom-bar"> 
     <a href="link">Modify</a> 
     <a href="link2">Delete</a> 
    </div> 
</div>

je dois avoir une zone de texte sur la page qui permet à l'utilisateur de filtrer la liste en fonction de ce qui est dans le champ titre. Je voudrais que cela se produise lorsque l'utilisateur tape.

Je pourrais faire cela sans demander de l'aide, mais je veux le faire correctement. J'utilise des WebForms ASP.Net 2.0 (malheureusement), et je peux utiliser jQuery si cela serait utile pour ça (j'ai très peu d'expérience avec ça).

Des conseils ou des échantillons seraient appréciés.

Si l'opération de filtrage prend quelques secondes, comment l'empêchez-vous de bloquer l'écran? Quel événement dois-je faire le filtre? Y at-il quelque chose dans jQuery qui rendrait le javascript un peu plus propre?

Source

2008-10-07 Max Schmeling

Oui, c'est très simple avec jQuery. cacher d'abord tout:

$("div.title").hide();

(. Matches éléments de type "div" avec classe "title") Voir les matches:

$("div.title:contains(searchText)").show();

Help for "contains".

Il ne faut pas prendre "secondes" pour ce faire, sauf si votre page est énorme. Vous pouvez le faire dans onKeyDown et onChange.

Source

2008-10-07 15:24:25

J'ai besoin de cacher le div parent du titre (que je n'ai pas donné une autre classe et ajouté cela au sélecteur sur le premier). Mais je ne sais pas comment faire apparaître le div parente des résultats de recherche. –

De plus, lorsque j'appuie sur la touche Maj tous les éléments disparaissent, je dois donc prendre en compte l'entrée non-texte. Dois-je simplement mettre cela dans un si cela vérifie le texte dans la zone de texte du filtre? –

$ ("div.title"). Parent(). Hide(); $ ("div.title: contains (searchText)"). Parent(). Show(); Oui, vérifiez le texte avant de vous cacher ou de l'afficher. –

Craig est très proche. Mettez ".parent()" avant ".hide()" ou ".show()" pour afficher ou masquer la div parente. En ce qui concerne votre deuxième commentaire, c'est un problème distinct, mais oui, vous devrez tenir compte de la saisie autre que du texte. Une autre idée consiste à tout montrer si la zone de texte du filtre est vide.

Source

2008-10-07 16:53:01

Je l'ai mis dans l'onkeyup de la zone de texte: javascript: $ ('div.title'). Parent(). Hide(); $ ('div.title: contains (this.value)'). parent(). show(); Il cache toutes les divs, mais ne les montre plus jamais. –

Répondre

Questions connexes