title: dynamically show/hide div based on the input of textbox
body: <p>I am working on a website,
  I have a page containing a list of persons built like this:</p>
  
  <pre><code>&lt;div class="personsMenu"&gt;
      &lt;div class="person"&gt;
          &lt;div class="name"&gt;John&lt;/div&gt;
          &lt;div class="age"&gt;18&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="person"&gt;
          &lt;div class="name"&gt;Kate&lt;/div&gt;
          &lt;div class="age"&gt;24&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="person"&gt;
          &lt;div class="name"&gt;Tom&lt;/div&gt;
          &lt;div class="age"&gt;17&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also have a textbox <code>&lt;input type="Text" id="filterTextBox"/&gt;</code>   </p>
  
  <p>Using jquery i need to do the following:</p>
  
  <p>When the user start typing in the textbox the divs where the "name" does not contain the characters disappears (some sort of a dynamic filter, you only see the persons who's name contains the written characters)</p>
  
  <p>So the logic should be like this:</p>
  
  <p>When the user type a character in the textbox (or remove one) we loop through all the "person" divs and if the "name" div inside that "person" contains the characters we show it, otherwise we hide it (.show() and .hide() in jquery)</p>
  
  <p>And of course if the textbox is empty we show everything.</p>
  
  <p>Can this be done?</p>
  
  <p>Thanks for any help</p>