Estoy trabajando en un sitio web, tengo una página que contiene una lista de personas construidas así:

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

También tengo un cuadro de texto<input type="Text" id="filterTextBox"/>

Usando jquery necesito hacer lo siguiente:

Cuando el usuario comienza a escribir en el cuadro de texto, los divs donde el "nombre" no contiene los caracteres desaparecen (una especie de filtro dinámico, solo ve a las personas cuyo nombre contiene los caracteres escritos)

Entonces la lógica debería ser así:

Cuando el usuario escribe un carácter en el cuadro de texto (o elimina uno), recorramos todos los divs de "persona" y si el "nombre" div dentro de esa "persona" contiene los caracteres que mostramos, de lo contrario lo ocultamos (.show ( ) y .hide () en jquery

Y, por supuesto, si el cuadro de texto está vacío, mostramos todo.

Se puede hacer esto?

Gracias por cualquier ayuda