"search" field to filter content
<p>I'm trying to create a simple "search field", what it does is it searches if typed in text is equal to any data-attr of the boxes in the content and if so, hide everything but what found, something similar (this ain't working):</p>

<p>css:</p>

<pre><code>.filter-div {
    display: none;
}
</code></pre>

<p>html:</p>

<pre><code>    &lt;label for="search"&gt;Search Input:&lt;/label&gt;
    &lt;input type="search" name="filter" id="search" value="" /&gt;
    &lt;div class="filter-div" data-filter="one"&gt;one&lt;/div&gt;
    &lt;div class="filter-div" data-filter="two"&gt;two&lt;/div&gt;
    &lt;div class="filter-div" data-filter="three"&gt;three&lt;/div&gt;
    &lt;div class="filter-div" data-filter="four"&gt;four&lt;/div&gt;
    &lt;div class="filter-div" data-filter="five"&gt;five&lt;/div&gt;
</code></pre>

<p>jquery:</p>

<pre><code>    // save the default value on page load
    var filter = $('.input').val();

    // on submit, compare
    if ( $('.input').val() = $("data-filter") {
         $(this).show();
    } ​
</code></pre>

<p>I am also not sure if the content should be filtered with a button click or found content should pop up as click-able text in the search, or should all happen auto? Finally probably I will have to check it against more than one data-attr.</p>

<p>Anyone?</p>
