Ich arbeite an einer Website. Ich habe eine Seite mit einer Liste von Personen, die so aufgebaut sind:

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

Ich habe auch eine Textbox<input type="Text" id="filterTextBox"/>

Mit jquery muss ich Folgendes tun:

Wenn der Benutzer anfängt, die Divs in das Textfeld einzugeben, in denen der "Name" nicht die Zeichen enthält, verschwindet er (eine Art dynamischer Filter zeigt nur die Personen an, deren Name die geschriebenen Zeichen enthält).

Die Logik sollte also so aussehen:

Wenn der Benutzer ein Zeichen in das Textfeld eingibt (oder ein Zeichen entfernt), durchlaufen wir alle "Person" -Divs und wenn das "Name" -Div in dieser "Person" die Zeichen enthält, die wir anzeigen, wird es ansonsten ausgeblendet (.show ( ) und .hide () in jquery)

Und wenn das Textfeld leer ist, zeigen wir natürlich alles.

Kann das gemacht werden?

Danke für jede Hilfe