Mam takie pytanie jak najprościej zrobić takie coś, że jak jest pole tekstowe, a pod nim <divy>, które są np. słowami i teraz te wszystkie divy się wyświeltają pod tym polem tekstowym, ale jak użytkownik wpisze np. słowo kluczowe to to pokazują się tylko te divy, które mają w sobie nazwę to.
Jak to zrobić może są jakieś funkcje do tego gotowe w jquery ?
Wyszukiwanie divów po słowie kluczowym w polu tekstowym
- Rejestracja: dni
- Ostatnio: dni
- Postów: 1181
0
- Rejestracja: dni
- Ostatnio: dni
- Lokalizacja: Łódź
- Postów: 541
2
https://api.jquery.com/contains-selector/
<input id="search">
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$("#search").on("keydown keyup", function(e) {
$('div').hide();
var val = $.trim($("#search").val());
val = "div:contains("+val+")";
$( val ).show();
});
- Rejestracja: dni
- Ostatnio: dni
- Postów: 1181
0
A jeszcze takie małe pytanko co trzeba zrobić, żeby filtrowało i nie uwzględniało wielkości liter ?
Coś tam próbowałem z użyciem .toUpperCase()); ale nie pomogło.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 847
1
https://stackoverflow.com/a/8747204
Trzymając się stylu jQuery to możesz rozbudować domyślny selektor contains
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
albo zbudować własną funkcje
jQuery.expr[':'].icontains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
i używałbyś tego podobnie jak zaproponował @gk1982, tylko ten kod musisz wkleić nad tym fragmentem
$("#search").on("keydown keyup", function(e) {
$('div').hide();
var val = $.trim($("#search").val());
val = "div:contains("+val+")"; // val = "div:icontains(" + val + "); <-- zależnie od tego jaki sposób wybierzesz
$( val ).show();
});