Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope checkbox filtering combined with search.

I'm working on a site with checkbox filtering, but I need a search field also. I've found the resources for making it work, but would like some help for putting it together.

The checkbox filtering is based upon:

I've found a search function her:

The search function isn't combined with checkbox filtering at that is what I need.

My example site can be seen here:

User Gravatar


Posted Jun 20 2014 3:17 UTC


  • Assigned To Gaby
  • Solved
  • isotope
    isotope filters

7 Replies

Here is an implementation of your two examples combined

Let me know if you need help adjusting it for your website.
(not sure what you want to search there..)

User Gravatar


Posted Jun 21 2014 11:40 UTC

That is very close :-)

Is it possible to easily narrow the search field's function to only work by searching for one field and only for numbers?

Example: Only search in field uk-size and search only for the numbers 8, 9, 10 etc.

The reason I am asking is because the searchfield on the site I'm working on should be working this way. Sorry for not describing it initially.

User Gravatar


Posted Jun 22 2014 1:31 UTC

I have updated the codepen ( to search in specific sub-node of each isotope item (the one with class size) and i have also incorporated your code to use ranges instead of just a number.

(in the example code i have added another element which is to be used for the searching, to avoid having to parse the number out of the "uk-size8" etc strings)

User Gravatar


Posted Jun 22 2014 2:39 UTC


This didn't solve your task? Get your own custom solution.

Thanks Gaby for your solution and time :-)

User Gravatar


Posted Jun 23 2014 5:08 UTC

Is it possible to combine the solution with URL-filter/hashchange.

I would like to link to the page prefiltered and I having difficulty finding proper documentation on Hashchange in version V2 of isotope.

User Gravatar


Posted Jun 25 2014 5:14 UTC

Hey, I need an answer to this exact question but the codepen-code Gaby posted ins now broken? can anyone help get it working again?

User Gravatar


Posted Nov 18 2014 8:47 UTC

@pixeltooth, corrected the little bug (was left over from my attempt to solve funkl's added question)

And added the hash management as well.

User Gravatar


Posted Nov 19 2014 5:35 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions