Eu estou trabalhando em um site, eu tenho uma página contendo uma lista de pessoas construídas assim:

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

Eu também tenho uma caixa de texto<input type="Text" id="filterTextBox"/>

Usando jquery eu preciso fazer o seguinte:

Quando o usuário começa a digitar na caixa de texto, os divs onde o "nome" não contém os caracteres desaparecem (algum tipo de filtro dinâmico, você só vê as pessoas cujo nome contém os caracteres escritos)

Então a lógica deveria ser assim:

Quando o usuário digita um caractere na caixa de texto (ou remove um), percorremos todos os divs "pessoa" e se o "nome" div dentro dessa "pessoa" contiver os caracteres que mostramos, caso contrário, ocultá-lo (.show ( ) e .hide () no jquery)

E, claro, se a caixa de texto estiver vazia, mostramos tudo.

Isso pode ser feito?

Obrigado por qualquer ajuda