title: Adjusting JS Live Search to show results regardless of word order
body: <p>I created a simple javascript live search &amp; disappear to filter names from a list, but now I'm running into trouble when someone searches for &quot;John Smith&quot; and can't find him because he's in the list as &quot;John H. Smith&quot;. Is there anything I can add to the js code to have the search look for the input's contents regardless of word order or if there's a middle initial or middle name between the first name and last name?</p>
  <p>Codepen for reference: <a href="https://codepen.io/naomimekeel/pen/rNzoeGQ" rel="nofollow noreferrer">https://codepen.io/naomimekeel/pen/rNzoeGQ</a></p>
  <p>View the live page example: <a href="https://www.giveto.pitt.edu/s/1729/18/interior-giving.aspx?sid=1729&amp;gid=2&amp;pgid=5065" rel="nofollow noreferrer">https://www.giveto.pitt.edu/s/1729/18/interior-giving.aspx?sid=1729&amp;gid=2&amp;pgid=5065</a></p>
  <pre><code>&lt;div class=&quot;facstaffsearchbar&quot;&gt;
      &lt;input type=&quot;text&quot;
             id=&quot;facstaff-search&quot;
             name=&quot;facstaff-search&quot;
             rel=&quot;facstaff-search&quot;
             placeholder=&quot; Search for a donor on this list . . .&quot; /&gt;
          &lt;div id=&quot;none&quot;&gt;Sorry, no results found! Please check your spelling or try again.&lt;/div&gt;
  
      &lt;div rel=&quot;facstaff-data&quot; id=&quot;facstaff-data&quot;&gt;
          &lt;div class=&quot;facstaff-data-item&quot;&gt;+Terry Laughlin KGSB ’81 &amp; Regina L. Aldisert&lt;/div&gt;
  &lt;div class=&quot;facstaff-data-item&quot;&gt;+Dr. W. Harry Archer, DEN ’27, A&amp;S ’37 &amp; +Mrs. Louise E. Archer, A&amp;S ’27&lt;/div&gt;
  &lt;div class=&quot;facstaff-data-item&quot;&gt;+Lauren H. Ashe, A&amp;S ’14&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>let foundOne = false;
  const none = document.getElementById('none');
  const searchInput = document.querySelector('input[rel=&quot;facstaff-search&quot;]');
  const data = document.querySelectorAll(&quot;.facstaff-data-item&quot;);
  show(false);
  searchInput.addEventListener('input', function (event) {
      // reset state
      show(false)
      foundOne = false;
      const input = event.target
      if (input.value) {
          const toMatch = input.value.toLowerCase();
          for (let i = 0, len = data.length; i &lt; len; i++) {
              const match = data[i].innerHTML.toLowerCase().includes(toMatch);
              data[i].style.display = match ? 'block' : 'none';
              if (match) foundOne = true;
          }
          if (!foundOne) show(true);
      } else 
          resetState()
  
  });
  function resetState() {
      for (let i = 0, len = data.length; i &lt; len; i++)
          data[i].style.display = 'block';
      
  }
  function show(bool) {
      none.style.display = bool ? 'block' : 'none';
  }
  </code></pre>