feature request: make listview filter a stand alone widget

[frequent]

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]

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

[jaspermdegroot]

@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]

@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]

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]

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]

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]

@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

Comments:

• 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]

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

[toddparker]

This looks really great.

[heiwen]

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

[frequent]

@heiwen:

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

[jaspermdegroot]

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