Automatically open filtered collapsible set items - Jquery mobile

StackOverflow https://stackoverflow.com/questions/22172248

Question

I've created a a simple page which has a jquery data-filter applied to collapsible set items (please see jsfiddle and code below). The collapsible set items are closed initially.

I want to be able to enter a word into the filter box and have the matching collapsible set items automatically opened when they are returned?

I can't find anything in the docs that will help me. Any ideas?

http://jsfiddle.net/mikewilsonuk/xpaGE/

<head>
        <title>JQM latest</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="page">
            <div data-role="content">
                <h1>Collapsible set with search</h1>
                <div data-role="collapsible-set" >
                    <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 data-role="collapsible">
                            <h1>Numero three <div>Grade: 25% (8th of 128)</div></h1>
                            <div>some potato</div>
                        </div>
                        <div data-role="collapsible">
                            <h1>Number four</h1>
                            <div>some text</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
Était-ce utile?

La solution

The filterable widget has an event (filterablefilter - http://api.jquerymobile.com/filterable/#event-filter) you can handle after it is done filtering. For convenience I added an id to your div with a data-filter.

<div id="filterMe" data-role="listview" data-inset="true" data-filter="true">...

Then on pagecreate, I added the event handler:

$(document).on("pagecreate", "#page", function(){
    $("#filterMe").on( "filterablefilter", function( event, ui ) {
        ui.items.each(function( index ) {
              $(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");

        });
    });
});

The returned UI object is a jQuery object whose items collection is a list of the collapsible objects the filter handled. So using the each() function, you can iterate the list and set the collapsed state based on whether the class ui-screen-hidden has been applied by the filter. After that I remove the ui-screen-hidden class so that none of the items are hidden. If you still want items hidden as well, you can just remove the .removeClass("ui-screen-hidden").

Here is a working FIDDLE

Autres conseils

Couldn't finish it, but maybe you can see what I had in mind:

$(document).on('keyup',function(){

    var searchtext = $("input[data-type='search']").val();

    var $cols = $(document).find('div[data-role='collapsible']');
    $.each(cols, function(){
        var col = this;

          if(col.find(":contains(searchtext)").length() > 0)
          {
              col.trigger('expand');
          }
          else{
              col.trigger('collapse');
          }
        });
    });
});

Problem is, that keyup fires too fast and jqm collapses filtered collapsibles after the internal fiter() event. maybe you have to set a timeout around the keyup event.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top