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!

11 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.

1 Like

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.

Do you have an example of this please?

From How to Request Help:

N.B. We discourage reviving old topics because people who participated in those discussions of yesteryear are usually not here anymore and they rarely reply to questions. It is best to open a new topic rather than bumping an old one.