динамически показать / скрыть 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)
И конечно, если текстовое поле пусто, мы показываем все.
Можно ли это сделать?
Спасибо за любую помощь