Search jQuery

jQuery Forum

Multiple lists to filter a master list

in jQuery Mobile • 9 years ago

I'm just looking for some advice on the best approach to sorting a large listview (about 50 items) using Jquery Mobile. I haven't tried anything like this with jquery mobile before.

I was hoping to achieve this by using a series of drop down 'select' menus which will filter the large listview. I am also open to the idea of using checkboxes within collapsable sets. I've looked on Google for some answers and so far I can't find anything.

I want to create a mobile app which users will be able to sort through a list of plants by filtering through certain characteristics (i.e. leaf shape, colour, flower colour, growth form, etc

Filters can be applied on and off to affect the large listview (toggle). Of course the listview will contain the default search function as well.

Would very much appreciate any tips or directions on this one. Thank you.

Replies(4)

John Chac..

Re: Multiple lists to filter a master list

9 years ago

use dialog for showing filter

watusiware

Re: Multiple lists to filter a master list

9 years ago

Not really sure what you are looking for here.

You need a form where the user will set the filtering criteria. As John suggest above, you might put this form in a dialog, or maybe a popup or just on the same page with the list.

You need some JS that will set change callbacks on all of your filter criteria. The change callbacks can all call a common function that will then filter the list based on your criteria. Iterate through your list, examine each entry, and apply your filter criteria. If a particular <li> is to be filtered out, then set a CSS class that will hide it.

It might be useful to add some hidden data to your list items, to make it easier to access the filterable values. I'd suggest using data- attributes.

You will have to write the code to do this. Were you expecting us to do it for you?

Coolwebs

Re: Re: Multiple lists to filter a master list

9 years ago

Hey @watusiware, no need to get 'narcy' here. I was just looking for some advice as I'm inexperienced with JS & JQM and usually forums are the best place to ask for advice. But if you want to write the code for me, I would be absolutely delighted!!

Thank you for your advice, that was precisely what I was looking for. I am expecting to write the code myself, not to have someone do it for me, otherwise I would post a job in Elance and not make a post in JQM forums. I'm a designer by nature and not a programmer so maybe I did not communicate my question very well on here but you seemed to have understood it well enough.

Great idea with data attribtues! I will use them like 'tags'. Using a css class to hide <li>, brilliant. I want to animate to fade out as well. I just want to ask JQM forum users - which way is best to do this (in your opition) - CSS3 or JS?

Thank you for your advice.

watusiware

Re: Multiple lists to filter a master list

9 years ago

I want to animate to fade out as well. I just want to ask JQM forum users - which way is best to do this (in your opition) - CSS3 or JS?

Definitely CSS3.

Top Reply

Response title

Attachments

jQuery Forum

Multiple lists to filter a master list

Replies(4)

Re: Multiple lists to filter a master list

Re: Multiple lists to filter a master list

Re: Re: Multiple lists to filter a master list

Re: Multiple lists to filter a master list

Statistics

Tags

Actions