feature request: make listview filter a stand alone widget #5629

frequent opened this Issue Feb 11, 2013 · 12 comments


None yet
4 participants

frequent commented Feb 11, 2013

I have updated my tableview plugin to the latest JQM. While doing so, I also changed the listview filter into a generic filter widget, so it can be used outside of a listview.

Right now it works on tables and listviews, but why not expand to custom selects or any group of elements?

Here is a short demo (without polish) showing a table and listview, each using the filter widget.

I can make a branch and pull-request, in case you want to have a look.


toddparker commented Feb 11, 2013

This would be really useful as an extension. Seems like we'd need to change the listview filter code to make this work?


jaspermdegroot commented Feb 11, 2013

@arschmitz was planning on turning the listview filter into a real widget extension for 1.4. Would be great if we can make it a generic one.

Related feature request from @aliok #2304 and @poonkave #5522 (filter for custom selects)


frequent commented Feb 11, 2013

@toddparker : I just replaced the whole listview.filter with the filter widget, so yes, change required :-)

I will try to commit tomorrow, then you can have a look.

@arschmitz, @ugomobi: it shouldn't be difficult to continue with the code I did. I'm more or less replacing elements with hardcoded tags (parent: TABLE, UL, children: TR,LI), so if this can be done more flexible, you'd have a generic widget.

The only thing I just noticed is the "destination" of the filter needs to be more flexible. Right now it's also hardcoded, buy I'm using a data-filter-destination attribute as well. Will update.


jaspermdegroot commented Feb 12, 2013

When working on this we have to see if we can improve performance of the filter. See #4271

Update: I added label "Filter" to track issues with listview filter.


jaspermdegroot commented Apr 24, 2013

Would be nice if we can make the filter not only work with search input, but also with radios, checkboxes or selects. See ticket #5930.

heiwen commented May 21, 2013

It would be great to have the filter as a separate control. I noticed that your demo also has sorting on column-headers via the data-sortable attribute. Is that something you are also considering to add?


frequent commented Jun 16, 2013

@ugomobi, @toddparker

I have finally had some time to work on the filter widget. I took the version in the "next" branch and made a few admendments.

Demo here: filter widget


  • I did not change much except for the children() selector
  • I have replaced the wrapping <form> because I'm often stuck wanting to use a filter inside a larger form and the form is never submitted anyway. So now it's a plain textinput wrapped in a <div>
  • the filter can be used on listview, select, table, controlgroup or any element containing children to filter using the data-itemSelector attribute (must be a class)
  • this also allows to use one filter for multiple datasets and filter anything containing text or filtertext
  • I also added data-target (must be a class) to place the filter somewhere on the page vs the default behavior

Some Questions:

  1. I also adapted the Qunit tests from the listview widget. Should I add tests for select, table, controlgroup, random as well?
  2. I'm having trouble with one test "Custom filterCallback should cause iteration on all list elements", where my _refreshCornersCount is stuck at 2, so the test never fires although it would pass. Who can I ask for help?
  3. I still need to update the CSS (not much to do I think). I see 2 icons on the right side of search elements quite often now (delete + search). Give it a try?

See you on IRC


frequent commented Jun 18, 2013

added a repo with current code https://github.com/frequent/filterbar


toddparker commented Jun 19, 2013

This looks really great.

heiwen commented Jul 2, 2013

Looks awesome. It would be great if data-mini and data-clear-btn could also be used on the filter widget.


frequent commented Jul 6, 2013


the filter should get the clear-button set when the textinput is generated, so it will be there.
mini I added


jaspermdegroot commented Aug 6, 2013

Closing as fixed because the new filterable widget is on master and will land in 1.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment