title: jQuery search and filter using keywords
body: <p>I'm trying to program a search/filter function that searches through unordered list items with data-* attributes based on what the user types in.</p>
  
  <pre><code>&lt;input type="text" placeholder="Search..." id="myInput" onkeyup="myFunction()"&gt;        
  &lt;ul id="myUL"&gt;
      &lt;li&gt;&lt;a href="#" data-keywords="photography"&gt;Digital Media Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-keywords="computers"&gt;Information Technology&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-keywords="coding"&gt;Programming&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is the code I have so far that works only for one data-keywords item. I need help to get it to bring up search results based on multiple keywords.</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" data-keywords="photography photoshop illustrator premiere"&gt;Digital Media Design&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>// Search functionality
  function myFunction() {
      // Declare variables
      var input, filter, ul, li, a, i;
      input = document.getElementById('myInput');
      filter = input.value.toUpperCase();
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName('li');
      // Loop through all list items, and hide those who don't match the search query
      for (i = 0; i &lt; li.length; i++) {
          a = li[i].getElementsByTagName("a")[0];
          if (a.innerHTML.toUpperCase().indexOf(filter) &gt; -1 || $(a).data("keywords") === filter.toLocaleLowerCase()) {
              li[i].style.display = "";
          } else {
              li[i].style.display = "none";
          }
      }
  }
  </code></pre>
  
  <p>If anybody has suggestions on how I can improve the code that would be awesome!</p>