Filter content by tags, sections, etc using JS

Hello!

I am sharing a bit of javascript that I wrote. It allows filtering content across different criteria simultaneously, for example tags, content types, authors etc.

This was originally written to filter hugo themes using multiple tags, which I posted about here:
https://discourse.gohugo.io/t/filterable-hugo-themes/
but I have spun this off into its own repo to be reusable inside hugo projects.

Demo and documentation are available here:
https://pointy.netlify.com/filter/

and source here (also includes example site):

Please let me know what you think, any suggestions or feedback would be appreciated!

9 Likes

Hi @pointyfar, thank you for making this!

I am trying to use it on my site, and notice a minor bug.

This is expected and current behaviour:

  • Click Tag A, posts with Tag A are shown
  • Click Tag B, posts with Tag A and Tag B are shown
  • Click Tag A again, posts with Tag B are shown only
  • Click Tag B again, all posts are shown

But when the order for the second click is different from the first, the behaviour is different from what I would expect, eg:

  • Click Tag A, posts with Tag A are shown
  • Click Tag B, posts with Tag A and Tag B are shown
    - Click Tag B again, posts with Tag B are shown only
    - Click Tag A again, posts with Tag B and Tag A are shown

I’m having a go at fixing it but have not made any progress. I think it must be something in the showCheck function, but I haven’t managed to figure it out. Would be grateful if it was easy for you to point me in the right direction and I can have a go fixing it.

Thanks!

1 Like

Hi @pointyfar! I think I have fixed the bug by replacing line 162 in hugotagsfilter.js from:

this.FILTERS[i][‘selected’].splice(tag,1);

to:

this.FILTERS[i][‘selected’].splice(this.FILTERS[i][‘selected’].indexOf(tag),1);

I’ll make a pull request on the repo.

Hey, thanks for letting me know, I’ll have a look.

1 Like

Hi @pointyfar, haven’t made the pull request above yet, but have found another bug:

  • When I click Tag A, posts with Tag A are shown.
  • And then when I click Author B, zero posts are shown instead of expected behaviour where posts with Tag A and Author B are shown.

I’ll have a go and see why this is happening.

Edit: ignore this comment, brain fart, the behaviour I expected didn’t make sense.

When I click Tag A, posts with Tag A are shown.
And then when I click Author B, posts which satisfy Tag A AND Author B are shown, and if there are no posts meeting that criteria, zero posts are correctly shown.

Hi, I got a fix as well for the tag behavior:

The README in particular states

  • [ ] Possibly add option to choose AND vs OR
  • Currently (OR within a filter set) + (AND between filter sets)

Well in my case I was interested in the AND behavior within a filter set. Here is the checkVisibility modified function:

    {
    key: 'checkVisibility',
    value: function checkVisibility(list, dataAttr) {
      /* Returns TRUE if list is empty or every element of attribute is included in the list */
      if (list.length > 0) {
        var matches = 0;
        for (var v = 0; v < list.length; v++) {

          var arr = dataAttr.split(" ").filter(function (el) {return el.length > 0;});
          if (arr.indexOf(list[v]) >= 0) {
            matches++;
          }

        }

        return matches == list.length;
      } else {
        return true;
      }
    }
  }

This way it checks that every tag we selected (the dataAttr) is in the list of tags (the list variable) of that page.
Hope it helps someone.

Hi sorry for the thread necromancy, but I’m wondering if/how this can work in tandem with pagination? Like if I have a page with All Posts and then a select dropdown to filter the posts by category, but there are still enough posts to be paginated, does this affect how Hugo does the pagination? Would I just use JS to paginate this?

Also, super thanks for your work on this @pointyfar

Yes, you would need to use JS to paginate your results.