Pracuję nad stroną internetową, mam stronę zawierającą listę osób zbudowanych w ten sposób:

<div class="personsMenu">
    <div class="person">
        <div class="name">John</div>
        <div class="age">18</div>
    </div>
    <div class="person">
        <div class="name">Kate</div>
        <div class="age">24</div>
    </div>
    <div class="person">
        <div class="name">Tom</div>
        <div class="age">17</div>
    </div>
</div>

Mam też pole tekstowe<input type="Text" id="filterTextBox"/>

Używając jquery muszę wykonać następujące czynności:

Gdy użytkownik zacznie wpisywać tekst w polu tekstowym, divy, w których „nazwa” nie zawiera znaków, znikają (jakiś rodzaj filtra dynamicznego, widać tylko osoby, których imię zawiera zapisane znaki)

Logika powinna więc wyglądać następująco:

Kiedy użytkownik wpisuje znak w polu tekstowym (lub usuwa jeden), przechodzimy przez wszystkie divy „person” i jeśli „nazwa” div wewnątrz „osoby” zawiera znaki, które pokazujemy, w przeciwnym razie ukrywamy to (.show ( ) i .hide () w jquery)

Oczywiście, jeśli pole tekstowe jest puste, pokazujemy wszystko.

Czy można to zrobić?

Dzięki za pomoc