What is the best way to create a filter on Tag Pages. The filter would be based on the item category and an one extra field value.

The only solution I could come up with was to use a jQuery script that displays/hides content based on class. Based on my template each item in the tag list page is wrapped in a <article> tag - which I plan on adding classes to the tag to use with jQuery script. Each class is an echo of the item category name and one specific extra field (in this example: Hybrid).

Here's the Tag Page code I am utilizing:

Example Output(s):

<article class="typeAll typeTrucks">...</article>
<article class="typeAll typeCars" typeHybrid>...</article>

(note: I am using the prefix "type" before the category name and hybrid extra field to create a unique class, exclusively for the filter script purposes)

The only draw back/limitation I found so far, is the pagination. For the script to work properly, all of the content must be present/rendered on the page. Which requires me to use the follow parameters: Category > Layout grid > Leading count > 999. This way all of the items are displayed without triggering the pagination. I am using a Lazy Load plugin, so I do not have to work about the images impacting page speed.

Is there another (Better) solution?

Here is the jQuery script I found and then forked for my purposes/demonstration:
jsfiddle.net/3g2y5ku8/

I also use certain scripts for filtering.
They all work pretty much the same, and I have seen this issue many times in the forum.

What to do:
The easy solution, use an extension which supports history and cookies for the pagination.

The hard solution, use JS cookies - github.com/js-cookie/js-cookie in order to set or delete a cookie each time a choice has been made. Once the page has been reloaded, you can read the cookie and depending on the value, hide all the options and show the ones you want.

Thanks for the speedy response @Krikor

The solutions you provided is a bit above my technical capabilities.

Is what I am doing ok/good enough?

Hopefully a developer will create a plugin to provide a solution to this problem (especially if the topic has been presented many times before)

You are 50% there, the script will work as a charm for singe pages.
Once the page has been reloaded however all choices are lost.

I believe that there are sorting scripts that support this feature.

As long as the performance is acceptable with your solution, then no need for loading more scripts.

Otherwise you will need to follow @Krikor solution, or to find a plugin that can do it.

Thanks @MohamedAbdelaziz

Thanks @MohamedAbdelaziz

Let me know Joe if you find an interesting plugin

No plugin, but I did work out the kinks for the jQuery solution I previously mentioned.

Thanks to the assistance of Peter ( Regular Labs ) and Andrey ( Joomcar )
I was able to get the jQuery to play nice with my Joomla! K2 site and add body list banners for mobile and portait tablet viewports.

I have sooo many K2 Power Tips to post after my launch :)

Just a head's up.
A nice script/ visual plugin which is nice with page filtering is this -> masonry.desandro.com/

It is worth a look.