.net - tuto - html efm




Filtrez la "liste" des divs avec Javascript (2)

J'ai un répéteur qui sort des divs comme suit pour chaque élément retourné d'une méthode.

<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 de 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?


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, il s'agit d'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.


Oui, c'est simple avec jQuery. Tout d'abord cacher tout:

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

(Correspond aux éléments de type "div" avec la classe "title".) Maintenant, montrez les résultats:

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

Aide pour "contient".

Cela ne devrait pas prendre "secondes" à moins que votre page soit énorme. Vous pouvez le faire dans onKeyDown et onChange.





webforms