Search jQuery

jQuery Forum

Automatically open filtered collapsible set items

in jQuery Mobile • 8 years ago

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

I want to be able to enter a word to filter by 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?

<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>Header</div>
<div data-role="collapsible">
<h1>Numero three </h1>
<div>some potato</div>
</div>
<div data-role="collapsible">
<h1>Number four</h1>
<div>some text</div>
</div>
</div>
</div>
</div>
</div>

Replies(11)

John Chac..

Re: Automatically open filtered collapsible set items

8 years ago

some thing like

$("#searchResults").collapsible( "option", "collapsed" ,false);

Mike Wils..

Re: Automatically open filtered collapsible set items

8 years ago

Hi John,

I don't think this is going to work. As it would open all elements with the searchResults id.

I've looked at the DOM and found that when the filter is applied collapsible set items which don't meet the filter criteria are appended with .ui-screen-hidden. This hides the element.

I need to find the reverse of this selector so that I can apply:

.collapsible( "option", "collapsed" ,false);

after the filter has been applied.

Thanks, Mike

John Chac..

Re: Automatically open filtered collapsible set items

8 years ago

$(".ui-collapsible:not(.ui-screen-hidden)").collapsible( "option", "collapsed" ,false);

I see you are using 'data-role="listview"' on div to get filter field.

Is it something you find from jqm demo / api documentation?

I mean listview without UL & LI's...

Mike Wils..

Re: Automatically open filtered collapsible set items

8 years ago

Yep, got the code from the jqm 1.4.2 demo (http://demos.jquerymobile.com/1.4.2/filterable/) under the section: Filter Collapsible Set and collapsible children.

This does exactly what I want, with the exception that I'd like the filtered results popped open when returned.

Thanks for the updated code, unfortunately this sets all collapsible elements to open by default.

I'm still stuck trying to find how to trigger the collapsible elements to open after the filter event.

John Chac..

Re: Automatically open filtered collapsible set items

8 years ago

something like

$(document).on("pageshow", "#page", function () {

$("#collapsiblesetForFilterChildren").on("filterablefilter", function (event, ui) {

$(".ui-collapsible:not(.ui-screen-hidden)").collapsible("option", "collapsed", false);

});

I have a sample here..

http://jsbin.com/yudimequ/1/

John Chac..

Re: Automatically open filtered collapsible set items

8 years ago

another sample with ur markup

http://jsbin.com/yudimequ/3/

You still have to do some custom code to make it work perfect...

Mike Wils..

Re: Automatically open filtered collapsible set items

8 years ago

Hi John,

That's fantastic

Thanks very much for your help with this. The last one works really well. The only slight glitch I can see is that when you clear the filter the collapsible elements stay open.

Thanks again!

John Chac..

Re: Automatically open filtered collapsible set items

8 years ago

nice to know it helped :)

$(document).on("pageshow", "#page", function () {
var $search = $("#searchForCollapsibleSetChildren").find("input");
$("#searchForCollapsibleSetChildren").on("filterablefilter", function (event, ui) {
var val = $.trim($search.val() + "");
if (val.length > 0) {
$(".ui-collapsible:not(.ui-screen-hidden)").collapsible("option", "collapsed", false);
} else {
$(".ui-collapsible").collapsible("option", "collapsed", true);
}
});
});

Mike Wils..

Re: Automatically open filtered collapsible set items

8 years ago

I owe you a beer John, thanks :)

maurice p..

Re: Automatically open filtered collapsible set items

7 years ago

In a nested set like the following, how would you automatically open both the parent and child?

<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>FAQ</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="listview" data-inset="true" id="filterMe" data-filter="true">
<div data-role="collapsible" data-inset="true" id="filterMe">
<h3>A</h3>
<div id="filterMe" data-role="listview" data-inset="true" data-filter="false">
<div id="filterMe" data-role="collapsible" class="openMe">
<h1>A1 header</h1>
<p>A1 body</p>
</div>
<div data-role="collapsible" class="openMe">
<h1>A2 header</h1>
<p>A2 body</p>
</div>
</div>
</div>
<div data-role="collapsible" data-inset="true" id="filterMe">
<h3>B</h3>
<div id="filterMe" data-role="listview" data-inset="true" data-filter="false">
<div id="filterMe" data-role="collapsible" class="openMe">
<h1>B1 header</h1>
<p>B1 body</p>
</div>
<div data-role="collapsible" class="openMe">
<h1>B2 header</h1>
<p>B2 body</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

watusiware

Re: Automatically open filtered collapsible set items

7 years ago

Don't tag-on to a year-old post with a different question. Please post your own question.

Thanks.

P.S. It's better if you post a link to a jsFiddle or Plunkr. That way, others can try your example, and then offer their own solution that you can easily try.

Top Reply

Response title

Attachments

jQuery Forum

Automatically open filtered collapsible set items

Replies(11)

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Re: Automatically open filtered collapsible set items

Statistics

Tags

Actions

Related Posts