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: http://codepen.io/desandro/pen/btFfG

I've found a search function her: http://codepen.io/desandro/pen/mCdbD

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

My example site can be seen here: http://norwerk.dk/new/sammenlign-ups-anlaeg/

User Gravatar

funkl

Posted Jun 20 2014 3:17 UTC

$50


  • Assigned To Gaby
  • Solved
  • isotope
    isotope filters
  • 1947 Views

7 Replies


Here is an implementation of your two examples combined

http://codepen.io/gpetrioli/pen/xLzfv

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

User Gravatar

Gaby

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

funkl

Posted Jun 22 2014 1:31 UTC

I have updated the codepen (http://codepen.io/gpetrioli/pen/xLzfv) 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

Gaby

Posted Jun 22 2014 2:39 UTC

Solution

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

Thanks Gaby for your solution and time :-)

User Gravatar

funkl

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

funkl

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? http://codepen.io/gpetrioli/pen/xLzfv can anyone help get it working again?

User Gravatar

pixeltooth

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

Gaby

Posted Nov 19 2014 5:35 UTC

Add a reply

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