динамически показать / скрыть div в зависимости от ввода текстового поля

Я работаю над сайтом, У меня есть страница, содержащая список людей, построенных так:

<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>

У меня также есть текстовое поле<input type="Text" id="filterTextBox"/>

Используя jquery мне нужно сделать следующее:

Когда пользователь начинает вводить в текстовое поле элементы div, где & quot; имя & quot; не содержит символов исчезает (какой-то динамический фильтр, вы видите только тех людей, чье имя содержит письменные символы)

Итак, логика должна быть такой:

Когда пользователь вводит символ в текстовое поле (или удаляет его), мы перебираем все «персона» divs и если & quot; имя & quot; div внутри этого "человека" содержит символы, которые мы показываем, в противном случае мы скрываем это (.show () и .hide () в jquery)

И конечно, если текстовое поле пусто, мы показываем все.

Можно ли это сделать?

Спасибо за любую помощь

Ответы на вопрос(7)

Ваш ответ на вопрос