title: JQuery hide all divs except for the divs I search for
body: <p>I want to create a search input for users to quickly find teachers for my school.</p>
  
  <p><img src="https://i.stack.imgur.com/dKb6s.png" alt="Teachers"></p>
  
  <p>The above is a horizontal scrollbar containing a lot of teachers. Every teacher in the scrollbar is wrapped in a seperate div called <code>staff-container</code>.</p>
  
  <pre><code>&lt;div class="staff-container"&gt;
      &lt;div class="staff"&gt;
          &lt;div class="staff-picture"&gt;
              &lt;img src="img/people/teachers/aiello.png" alt="" /&gt;
          &lt;/div&gt;
          &lt;p&gt;&lt;span class="bold"&gt;Mrs. Aiello&lt;/span&gt;&lt;br /&gt;
          Ext. 13328&lt;br /&gt;
          Room 328/323&lt;br /&gt;
          &lt;a href="mailto:asusan@wcskids.net"&gt;asusan@wcskids.net&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above is the <code>staff-container</code> for Mr. Ahmed. Every teacher has the same exact structure in HTML.</p>
  
  <p>When I type a teacher's name in the search and click the search button, I want the following to happen.</p>
  
  <p><img src="https://i.stack.imgur.com/YpJ33.png" alt="Search"></p>
  
  <p>I want all the <code>staff-container</code>'s that don't match the search term to be hidden with <code>display:none;</code> by using JQuery.</p>
  
  <p>I want the search to only look for the teacher name. In other words, only the <code>&lt;span class="bold"&gt;teacher&lt;/span&gt;</code> in each <code>staff-container</code> should be looked for by the search.</p>
  
  <p>If no teacher matches the search term, I want all the teachers to be displayed. If nothing is searched, I want all the teachers to be displayed.</p>
  
  <p>Search HTML:</p>
  
  <pre><code>&lt;div class="search-container"&gt;
      &lt;form class="form-search form-inline"&gt;
          &lt;input type="text" class="input-medium search-query" placeholder="Search"&gt;
          &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a VERY simple <a href="http://jsfiddle.net/KqFMh/" rel="noreferrer">fiddle</a></p>
  
  <p><strong>Check out the <a href="http://www.wcs.k12.mi.us/wmhs/Staff/index.html" rel="noreferrer">webpage</a></strong> I am adding the search to. <strong>It does not have the search on it yet.</strong></p>
  
  <p>I'm sorry if I'm asking too big of a question sad face, I just need help because I have never made a search in jquery.</p>
  
  <p><em>edited to remove downvote</em></p>