CODEWITHSUNDEEP
jquerylistviewfilterjquery-mobile
Victor
Victor

Reputation: 263

How to filter collapsible set with jQuery Mobile?

I have a simple collapsible set that I want to filter with single filter which will displayed above the set. The desired result is to see only items that match my search (not the whole collapsible block where the item appears).

Please advise how to handle this task...

<div data-role="content">
    <div data-role="collapsible-set">   
        <div data-role="collapsible" data-content-theme="c">
            <h3>Firs Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Second Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Chrysler</a></li>
                <li><a href="index.html">Dodge</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Third Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Ferrari</a></li>
                <li><a href="index.html">Ford</a></li>
            </ul>
        </div>
    </div><!--/content-primary -->
</div>

Upvotes: 2

Views: 8586

Answers (3)

Thijs
Thijs

Reputation: 3055

I know this question is a bit old but I was facing the same problem. I have found a solution where there was no need to write JavaScript or CSS. I hope this could be usefull for other people who are having this problem. jsfiddle

Edit: An update using nested lists

<div data-role="page" id="page">
    <div data-role="content">
        <h1>Collapsible set with search</h1>
        <div data-role="collapsible-set" data-filter="true">
            <div data-role="listview" data-inset="true" data-filter="true">
                <div data-role="collapsible">
                    <h1>Numero uno</h1>
                    <div>some text</div>
                </div>
                <div data-role="collapsible">
                    <h1>Number two</h1>
                    <div>some text</div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 3

Newbo.O
Newbo.O

Reputation: 1948

The question is a bit old, but as I run into the same issue today, here is a demo of my workaround: http://jsfiddle.net/2Vg4z/.

So, about the JS, I just copy/pasted the code from original listview filter and modified it a bit so it can be applied to multiple listviews.

The ul from which the search field will be created has to set 2 attributes:

  • data-x-filter, a boolean like data-filter
  • id, to be able to identify the search field

Others ul which has to be filtered by this search field has to set 1 attribute:

  • data-x-filter-id, the id set before

To use it, just copy/paste the code from the jsfiddle on from this pastebin!

In the demo, I added an empty list to have it on top of the collapsible group but if the list isn't empty, it will also filter its own items.

I hope it helps.

Note: this solution isn't perfect but I just wanted to have this quickly. A better solution would be to create a "search field widget" to avoid the need of empty list but it needs a bit more coding.

Upvotes: 2

Jasper
Jasper

Reputation: 76003

You can put your data-role="collapsible" elements inside of list-items in a data-role="listview" element which can have the data-filter="true" attribute to automatically create a filter search input. Here is an example:

    <ul data-role="listview" data-filter="true" id="outer-ul">
        <li>
            <div data-role="collapsible" data-content-theme="c">
                <h3>Firs Collapsed list</h3>
                <ul>
                    <li><a href="index.html">Acura</a></li>
                    <li><a href="index.html">Audi</a></li>
                    <li><a href="index.html">BMW</a></li>
                </ul>
            </div>
        </li>
    </ul>

Here is a demo: http://jsfiddle.net/Awg8W/2/

Notice that there are some CSS issues you'll have to deal-with. One of which was that having inner data-role="listview" elements creates multiple search inputs. I hid of all but the first one with this CSS:

#page .ui-listview-filter:nth-child(n+2) {
    display : none;
}​

Update

You can then replicate the accordion effect with this jQuery code:

//wait for page to initialize
$(document).on('pageinit', '#page', function () {

    //find the headings we want to watch
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function () {

        //cache the parent collapsible widget
        var that = $(this).closest('.ui-collapsible')[0];

        //collapse all other collapsible widgets
        $(this).closest('ul').find('.ui-collapsible').filter(function () {

            //filter-out the collapsible widget that got clicked, so it functions
            return this !== that;
        }).trigger('collapse');

        //since we are messing around with the listview widget, let's refresh it
        $(this).closest('ul').trigger('refresh');
    });
});​​

Upvotes: 4

Related Questions