I have a page of dynamic results from a MySQL table, I’m currently using jQuery to filter them based on a data-town attribute which all ‘blocks’ have been assigned.
I want to filter based on a few other attributes too, but i need the filters to play nice with each other and if one filter has been applied already then the next filter should take that into account and only display results from the already filtered results - not all of the results.
As mentioned above, location is being filtered by a drop down list on the data-town attribute - here is the code;
a couple of range sliders (min and max) / or drop downs for filtering results between two age ranges using data-age attribute - if age is cught by the range it is shown
a couple of range sliders (min and max) or drop downs for filtering results between two price ranges using data-price - if the price is caught in the range then it is shown
I’m really struggling trying to combine additional jquery with my existing code - any help would be greatly appreciated.
I have several seperate form fields that need to filter a page of div elements but need to take each other in to account. I don’t want to filter anything with one single field.
Hello there.
I recently had similar trouble combining filters too. I suggest that you render your list depending on an array of objects. This way you can use Array.filter to filter the items, and Array.reduce within the filter function to find out if the combination of filters applies to the item.
I wrote more in depth regarding that problem on my blog. To share my approach on how to deal with multiple filters. Although, I don’t use any jquery and explain more about the functions that deal with the data directly.
I only use text filters and dropdowns in the example. However, you can extend the example with sliders. https://refreshless.com/nouislider/ is a great library to use for range sliders. They have a beautiful API which is easy to integrate with existing projects. Please let me know if you have any other questions on that topic, I’m happy to help!
Thanks for this - I really like the approach you’ve taken.
At present, I have my filters working but it remains to be seen whether it will fall over the more filter options I add.
You say in your post that the data should be in JSON format - how do I go about pulling data from the database into a JSON file? For the filters to be of any use in my project the data needs to be dynamic and drawn from the DB.
Hello! Great to see that you enjoyed the approach I have taken
I always try to avoid direct DOM manipulation and render data from an array of objects. This is possible in jquery too. For now, you are good to go, if you overwrite the HTML every time the filter changes.
It is tough to combine back-end code with front-end sometimes. Especially when you try to make them interact with each other. You only have to care about one-way manipulation right now - bringing the data from back-end to front-end and then filter that using javascript with jQuery.
If you don’t have a REST API to serve your data (which is more comfortable in terms of handing over data) you can assign the data with an inline script and php combined (which is a little ugly, but the easiest and most straight forward solution right now)
There are many different ways to go about implementing this. If you care about accessibility and fallbacks, you would first render the items using php, and make the form for the filters - when submitted - reload the page with GET params to filter depending on the options given. And use javascript - if enabled - to offer real-time filtering of items.
Depending on your requirements, it is easier to use javascript only to render and filter. It is way more complex to get everything right in the first run (especially if you have to run both front-end and back-end code!), so lets focus on javascript first.
I prepared another post explaining how to do that with plain javascript and using a range slider.
Please let me know if this helps to solve the problem. You should also be able to integrate this with your existing code base.