Live search en jQuery
Je suis en train de construire une page qui imite de recherche en temps réel - les résultats de la recherche apparaissent comme les types d'utilisateurs. Le plugin ci-dessous fonctionne bien sauf que je veux cacher les résultats(liste ordonnée) dans le début et le montrer chaque correspondance de balle que l'utilisateur tape.
http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/
jQuery
$(document).ready(function(){
$("#filter").keyup(function(){
//Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
//Loop through the comment list
$(".commentlist li").each(function(){
//If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
//Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
//Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});
HTML
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
</fieldset>
</form>
<ol class="commentlist">
<li>Comment #1</li>
<li>Comment #2</li>
</ol>
Toute aide appréciée.
- Est les commentaires pré-chargé?
Vous devez vous connecter pour publier un commentaire.
Si les commentaires sont pré-installées, vous pouvez le masquer au départ de deux façons.
Appel $('.commentlist li').hide() sur les dom prêt
Ajouter un style
.commentlist li { display: none}
Un autre petit tweak je suggère, c'est de Créer une regex variable en dehors de la boucle déclaration
Démo: Violon
Vous pouvez évidemment utiliser des animations comme
fadeIn('slow')
etfadeOut('slow')
au lieu deshow()
ethide()
pour animer l'affichage des objets, à mon avis, il est à la recherche de bonnes comme de nombreux éléments sera d'animer l'ensemble.En CSS ajouter
puis dans votre js, le premier si
puis, sur la dernière, au lieu de $(this).show() ajouter $(this).fadeIn('slow')
Mise à JOUR de votre code ici: http://tinyurl.com/a972s6t
Cela devrait le faire pour vous:
Si vous voulez les animations de fondu:
Démo du script en action: http://www.glow-raspberry.com/where-to-buy. Tapez "plaza", par exemple.