"search" field to filter content

Question

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, compare
    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?

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

$('#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 comment

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 26 '12 at 07:33

thecodeparadox

86,271
21
138
164

@rob.m check my answer and comment if you want something more or different – thecodeparadox Jun 26 '12 at 07:40
am i correct by saying this will check against ANY data-attr in the html? If so perfect, so i won't have to use different ones for different data-attr i may have – rob.m Jun 26 '12 at 07:42
@rob.m it will check for all `div`s with `data-filter` attribute – thecodeparadox Jun 26 '12 at 07:44
I DVed for a sec because I thought the OP wanted a the filter value to be a part of not equal to the search string. Check it, it's back now. – iambriansreed Jun 26 '12 at 07:48
@rob.m You don't need to use a class at all you can just attach to `[data-filter]` for both css and jQuery selection. And if you want it to show items if it matches the filter result partially my answer covers that. – iambriansreed Jun 26 '12 at 07:52
@iambriansreed I think OP used class for `CSS` purpose, to hide them initially – thecodeparadox Jun 26 '12 at 07:54
@iambriansreed I also know. It's OP's choice, thanks for your suggestion – thecodeparadox Jun 26 '12 at 07:56
@thecodeparadox I know he can use `[data-filter] { display: none; }`. See my fiddle: http://jsfiddle.net/iambriansreed/xMwS5 Documentation: http://w3schools.com/css/css_attribute_selectors.asp – iambriansreed Jun 26 '12 at 07:56
ye don't worry, the class and css part wasn't the most important anyway. Is it possible to display a list of all the results when start typing? But not hide them until we either click on a pop up text result or hit the submit? – rob.m Jun 26 '12 at 07:57
@rob.m what do you mean by all results? all one, two, three..? and which popup or submit button? please include it in my fiddle and share link – thecodeparadox Jun 26 '12 at 08:01
sorry, something similar to google search, the idea is to "search" probably some 100s boxes and user may not know the exact name, so a pop up result list bases on typed letter would be ideal – rob.m Jun 26 '12 at 08:03
found an example of auto complete, be good to do something similar but based on data-filter attribute matches (apologies kinda evolving my question): http://jsfiddle.net/zkVrs/ – rob.m Jun 26 '12 at 08:12
ref: http://stackoverflow.com/questions/8302534/sorting-autocomplete-ui-results-based-on-match-location – rob.m Jun 26 '12 at 08:17
lets nail it down if we can, basically this would be some ideal solution and real situation: http://jsfiddle.net/zkVrs/48/ - when the pop up appears, and we "hit" correct searched result, we .hide() the rest but the one we searched (i know we're taking this somewhere else from the question) – rob.m Jun 26 '12 at 08:30
@rob.m I think my code also works for http://jsfiddle.net/zkVrs/52/ and we should stop it here, mate. If you want more than through another question, please – thecodeparadox Jun 26 '12 at 08:40
yep, yours is just perfect for what i asked and I accept it. I basically didn't know about the autocomplete plugin and has evolved my question and thought on it, to conclude check this: http://jsfiddle.net/m5HKX/1/ – rob.m Jun 26 '12 at 08:43
@thecodeparadox yep, that's it, guess what? Not sure why all that code was needed, look at a slimmer one: http://jsfiddle.net/m5HKX/13/ – rob.m Jun 26 '12 at 09:20

iambriansreed · Answer 2 · 2012-06-26T07:51:06.123

1

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.net/iambriansreed/xMwS5/

edited Jun 26 '12 at 07:51

answered Jun 26 '12 at 07:44

iambriansreed

21,935
6
63
79

"search" field to filter content

2 Answers2

According to demo fiddle example in comment