Question

I have a JQM page with two data-role=”listview”. They both share the same data-set, one listview is text-only, the other one also includes icons.

I want to use the data-filter=”true” option on both listviews, but only with one filter, which updates both listviews.

I’m clueless on how I could do this, so any hints are greatly appreciated.

Here’s what I have:

 <ul data-role="listview" data-filter="true" data-divider-theme="c">
    <li data-role="list-divider">B</li>
    <li><a href="#profile" data-transition="slide"><img src="loc/icons/brandSprite.png" class="ui-li-icon">One</a></li>
    <li><a href="#profile" data-transition="slide"><img src="loc/icons/brandSprite.png" class="ui-li-icon">Two</a></li>
    <li><a href="#profile" data-transition="slide"><img src="loc/icons/brandSprite.png" class="ui-li-icon">Three</a></li>
    ...

 <ul data-role="listview" class="iconList">
    <li data-icon="false"><a href="#profile" data-transition="slide"><img src="img/brands/icon_one.png" /><h3>One</h3></a></li>
    <li data-icon="false"><a href="#profile" data-transition="slide"><img src="img/brands/icon_two.png" /><h3>Two</h3></a></li>
    <li data-icon="false"><a href="#profile" data-transition="slide"><img src="img/brands/icon_three.png" /><h3>Three</h3></a></li>
    ...

The first list has the filter, which should filter both the first and second list.

Thanks for help!

Answer 1

both are separate lists. data-filter=”true” is for filtering in one list only, where it is set.
what u can do is a hack maybe. put data-filter=true in both. then after the list is refreshed, hide the filter on the second list. (display:none). Now put an event handler which types on the second filter field whatever u type on the top one.
This will work but is not recommended. I suggest instead of using data-filter=”true” u implement your own filtering mechanism for this.
Or just put data filter on top one and then hide those elements on the 2nd list, which get hidden on the first.