title: Adding a search bar that interacts with an existing checkbox-based search filter
body: <p>I have designed this search filter:
  <a href="http://jsfiddle.net/n3EmN/171/" rel="nofollow noreferrer">http://jsfiddle.net/n3EmN/171/</a>
  It's made with checkboxes, but I want to add a search bar too, which will interact with the checkboxes.  Can someone help me with jQuery or JavaScript code to do it?</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;pre id=result&gt; &lt;/pre&gt;
  
  &lt;div class="flowers-wrap"&gt;
  
    &lt;h3 style="font-size:14px; font-weight:normal;"&gt;Available Flowers&lt;/h3&gt;
    &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter flowers by colour:&lt;/strong&gt;&lt;/p&gt;
    &lt;form&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-colour" value="red" id="red" /&gt; Red&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-colour" value="yellow" id="yellow" /&gt; Yellow&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-colour" value="pink" id="pink" /&gt; Pink&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-colour" value="purple" id="purple" /&gt; Purple&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-colour" value="green" id="green" /&gt; Green&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-colour" value="other" id="other" /&gt; Other&lt;/label&gt;
    &lt;/form&gt;
    &lt;p style="font-size:12px;"&gt;&lt;strong&gt;Filter flowers by size:&lt;/strong&gt;&lt;/p&gt;
    &lt;form&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-size" value="tiny" id="tiny" /&gt; Tiny&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-size" value="small" id="small" /&gt; Small&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-size" value="medium" id="medium" /&gt; Medium&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-size" value="large" id="large" /&gt; Large&lt;/label&gt;
      &lt;br&gt;
      &lt;label style="font-size:12px;"&gt;
        &lt;input type="checkbox" name="fl-size" value="giant" id="giant" /&gt; Giant&lt;/label&gt;
    &lt;/form&gt;
  
  &lt;/div&gt;
  
  &lt;div class="continents-wrap"&gt;
  
    &lt;h3 style="font-size:14px; font-weight:normal;"&gt;Available Continents&lt;/h3&gt;
  
    &lt;div class="continents" style="font-size:12px;"&gt;
      &lt;div&gt;Africa
        &lt;input type="checkbox" name="fl-cont" value="africa" id="africa" /&gt;
      &lt;/div&gt;
      &lt;div&gt;Europe
        &lt;input type="checkbox" name="fl-cont" value="europe" id="europe" /&gt;
      &lt;/div&gt;
      &lt;div&gt;Asia
        &lt;input type="checkbox" name="fl-cont" value="asia" id="asia" /&gt;
      &lt;/div&gt;
      &lt;div&gt;North America
        &lt;input type="checkbox" name="fl-cont" value="north-america" id="north-america" /&gt;
      &lt;/div&gt;
      &lt;div&gt;South America
        &lt;input type="checkbox" name="fl-cont" value="south-america" id="south-america" /&gt;
      &lt;/div&gt;
      &lt;div&gt;Antarctica
        &lt;input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" /&gt;
      &lt;/div&gt;
      &lt;div&gt;Australasia
        &lt;input type="checkbox" name="fl-cont" value="australasia" id="australasia" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="flowers"&gt;
    &lt;div class="flower" data-id="aloe" data-category="green small medium africa"&gt;Aloe&lt;/div&gt;
    &lt;div class="flower" data-id="lavendar" data-category="purple green medium africa europe"&gt;Lavender&lt;/div&gt;
    &lt;div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia"&gt;Stinging Nettle&lt;/div&gt;
    &lt;div class="flower" data-id="gorse" data-category="green yellow large europe"&gt;Gorse&lt;/div&gt;
    &lt;div class="flower" data-id="hemp" data-category="green large asia"&gt;Hemp&lt;/div&gt;
    &lt;div class="flower" data-id="titan-arum" data-category="purple other giant asia"&gt;Titan Arum&lt;/div&gt;
    &lt;div class="flower" data-id="golden-wattle" data-category="green yellow large australasia"&gt;Golden Wattle&lt;/div&gt;
    &lt;div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america"&gt;Purple Prairie Clover&lt;/div&gt;
    &lt;div class="flower" data-id="camellia" data-category="pink other large north-america"&gt;Camellia&lt;/div&gt;
    &lt;div class="flower" data-id="scarlet-carnation" data-category="red medium north-america"&gt;Scarlet Carnation&lt;/div&gt;
    &lt;div class="flower" data-id="indian-paintbrush" data-category="red medium north-america"&gt;Indian Paintbrush&lt;/div&gt;
    &lt;div class="flower" data-id="moss-verbena" data-category="purple other small south-america"&gt;Moss Verbena&lt;/div&gt;
    &lt;div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america"&gt;Climbing Dayflower&lt;/div&gt;
    &lt;div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica"&gt;Antarctic Pearlwort&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body {
    font-family: 'Arial';
    color: #646464;
  }
  
  .continents-wrap {
    float: left;
    width: 20%;
    margin: 0 5% 0 0;
    padding: 0;
  }
  
  .flowers-wrap {
    float: left;
    width: 20%;
    margin: 0 5% 0 0;
    padding: 0;
    position: relative;
  }
  
  .flowers {
    float: left;
    width: 50%;
  }
  
  .flowers div {
    float: left;
    width: 90%;
    height: 68px;
    line-height: 68px;
    padding: 0 5%;
    background: #eee;
    margin: 0 0 1px;
    position: relative;
  }
  </code></pre>
  
  <h2>JavaScript</h2>
  
  <pre><code>var $filterCheckboxes = $('input[type="checkbox"]');
  
  $filterCheckboxes.on('change', function() {
  
    var selectedFilters = {};
  
    $filterCheckboxes.filter(':checked').each(function() {
  
      if (!selectedFilters.hasOwnProperty(this.name)) {
        selectedFilters[this.name] = [];
      }
  
      selectedFilters[this.name].push(this.value);
  
    });
  
    // create a collection containing all of the filterable elements
    var $filteredResults = $('.flower');
  
    // loop over the selected filter name -&gt; (array) values pairs
    $.each(selectedFilters, function(name, filterValues) {
  
      // filter each .flower element
      $filteredResults = $filteredResults.filter(function() {
  
        var matched = false,
          currentFilterValues = $(this).data('category').split(' ');
  
        // loop over each category value in the current .flower's data-category
        $.each(currentFilterValues, function(_, currentFilterValue) {
  
          // if the current category exists in the selected filters array
          // set matched to true, and stop looping. as we're ORing in each
          // set of filters, we only need to match once
  
          if ($.inArray(currentFilterValue, filterValues) != -1) {
            matched = true;
            return false;
          }
        });
  
        // if matched is true the current .flower element is returned
        return matched;
  
      });
    });
  
    $('.flower').hide().filter($filteredResults).show();
  
  
  
  });
  </code></pre>