jQuery - Filtres
Filtres jQuery
Utilisez jQuery pour filtrer/rechercher des éléments spécifiques.
Filtrer les tableaux
Effectuez une recherche insensible à la casse pour les éléments d'un tableau :
Exemple
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Exemple expliqué : Nous utilisons jQuery pour parcourir chaque ligne de la table afin de vérifier s'il existe des valeurs de texte qui correspondent à la valeur du champ de saisie. La toggle()méthode masque la ligne ( display:none) qui ne correspond pas à la recherche. Nous utilisons la toLowerCase()méthode DOM pour convertir le texte en minuscules, ce qui rend la recherche insensible à la casse (autorise "john", "John" et même "JOHN" lors de la recherche).
Filtrer les listes
Effectuez une recherche insensible à la casse pour les éléments d'une liste :
Exemple
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filtrer n'importe quoi
Effectuez une recherche insensible à la casse pour le texte à l'intérieur d'un élément div :
Exemple
I am a paragraph.
Another paragraph.