jQuery - Filter
jQuery-Filter
Verwenden Sie jQuery, um nach bestimmten Elementen zu filtern/suchen.
Tabellen filtern
Führen Sie eine Suche ohne Berücksichtigung der Groß-/Kleinschreibung nach Elementen in einer Tabelle durch:
Beispiel
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>
Beispiel erklärt: Wir verwenden jQuery, um alle Tabellenzeilen zu durchlaufen und zu prüfen, ob es Textwerte gibt, die mit dem Wert des Eingabefelds übereinstimmen. Die toggle()Methode blendet die Zeile ( display:none) aus, die nicht mit der Suche übereinstimmt. Wir verwenden die toLowerCase()DOM-Methode, um den Text in Kleinbuchstaben umzuwandeln, wodurch die Groß- und Kleinschreibung bei der Suche nicht berücksichtigt wird (erlaubt "john", "John" und sogar "JOHN" bei der Suche).
Listen filtern
Führen Sie eine Suche ohne Berücksichtigung der Groß-/Kleinschreibung nach Elementen in einer Liste durch:
Beispiel
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Alles filtern
Führen Sie eine Suche ohne Berücksichtigung der Groß-/Kleinschreibung nach Text in einem div-Element durch:
Beispiel
I am a paragraph.
Another paragraph.