Filtering data in Javascript

Question

I have a list of elements (DIVs) on my html page as below.

There is a list of hashtags on the same page.

I need that when the user clicks on the hashtag (e.g. #bacteria) only those DIVs that contain that hashtag are shown.

What would be the most lightweight and easy way to implement that?

<div class='entry'>
    <p>#antibiotics destroy #e-coli and that&#39;s not good!!!!</p>
    <!-- Hashtags: #antibiotics #eColi -->
    <!-- UID: 755a2a60-972e-11e3-a464-872f2fc4dea2 -->
</div>

<div class='entry'>
    <p>#bacteria can be #friendly, such as #e-coli for example</p>
    <!-- Hashtags: #bacteria #friendly #eColi -->
    <!-- UID: 6cc66d00-972e-11e3-a464-872f2fc4dea2 -->
</div>

<div class='entry'>
    <p>#antibiotics can fight #bacteria</p>
    <!-- Hashtags: #antibiotics #bacteria -->
    <!-- UID: b37992c0-9686-11e3-8b2c-c97ae6645b3b -->
</div>

I know that Angular is powerful for this kind of stuff, but I'd like to use something lightweight and easy. Like maybe it's possible to do it with jQuery or something...

FYI the whole thing runs on Node.Js / Express.Js with EJS rendering.

Thank you!

UPDATE

Suppose now I have several hashtags I need to check for. Like as if contains variable is not a string but an array and i need to only show entries that contain ALL of this array's values. How would I change the code? Trying to do that, but can't manage... Thank you so much!

Answer 1

Use the :contains jquery selector

$(document).ready(function(){
    $('.entry').hide();
    $('.links').on('click','a',function(e){
        var $ctx = $(e.target);
        var contains = $ctx.text();
        $('.entry').hide();
        $('.entry:contains('+contains+')').show();
        return false;
    });    
});

Sample : http://jsfiddle.net/LA3tD/

EDIT

you can use text with commas and then split, or use data attribute with some separator and split it afterwards for a concatenated filter selector

$(document).ready(function(){
    $('.entry').hide();
    $('.links').on('click','a',function(e){
        var $ctx = $(e.target);
        var contains = $ctx.text();
        $('.entry').hide();
        if(contains.indexOf(',')!=-1){
            var tags = contains.split(',');
            var filt = '';
            $.each(tags,function(i,el){
                filt += ':contains('+el+')';
            });
            // :contains can be concatenated multiple times f.e.: ":contains(foo):contains(bar)"
            $('.entry'+filt).show();
        }else{
            $('.entry:contains('+contains+')').show();
        };
        return false;
    });    
});

Updated sample: http://jsfiddle.net/LA3tD/1/

Answer 2

Ideally, you'd incorporate your hash-tag data into the divs themselves...perhaps with the data-* attribute:

<div class='entry' data-hashtags='antibiotics bacteria'>

Then via jQuery you could loop through them hiding the ones that don't match:

var clickedHashtag = x //get the clicked on hashtag however you like

$('.entry').each(function(){
    if($(this).data('hashtags').indexOf(clickedHashtag)>=0){
        $(this).hide()
    }
})

Fiddle: http://jsfiddle.net/Jz3gZ/

Answer 3

Untested:

$('.entry').each(function(item) { $(item).show($item.is('.' + hashtag)); });

You would have to add the hashtag as a class, of course:

<div class="entry antibiotics">