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):

css:

.filter-div {
    display: none;
}

html:

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

jquery:

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

    // on submit, pare
    if ( $('.input').val() = $("data-filter") {
         $(this).show();
    } ​

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.

Anyone?

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):

css:

.filter-div {
    display: none;
}

html:

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

jquery:

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

    // on submit, pare
    if ( $('.input').val() = $("data-filter") {
         $(this).show();
    } ​

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.

Anyone?

• javascript
• jquery

2 Answers 2

$('#search').on('keyup', function() {
    var val = $.trim(this.value);
    if (val) {
        $('div[data-filter=' + val + ']').show();
    } else $('div[data-filter]').hide();
});

Working sample

According to demo fiddle example in ment

var divs = $('div[data-filter]');
$('#search').on('keyup', function() {
    var val = $.trim(this.value);
    divs.hide();
    divs.filter(function() {
        return $(this).data('filter').search(val) >= 0
    }).show();
});

divs.on('click', function() {
    divs.not(this).hide();
    var text = $.trim($(this).text());
    $('#search').val(text);
});

Working sample

JavaScript:

var filter_div = $('[data-filter]');
$('#search').keyup(function(){
    var val = $.trim(this.value);
    filter_div.hide();
    if(val.length == 0) return;
    filter_div.filter(function(){            
        return $(this).data('filter').indexOf(val)>-1
    }).show();

});

Fiddle: http://jsfiddle/iambriansreed/xMwS5/

​