Wyszukiwanie divów po słowie kluczowym w polu tekstowym

0

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 ?

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();
});

http://jsfiddle.net/45zf7nwm/

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.

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();
});

1 użytkowników online, w tym zalogowanych: 0, gości: 1