I'm working on a JQM page with two data-role="listview" elements. Both of them are using the same data set, but one listview displays only text while the other includes icons as well.
My goal is to implement the data-filter="true" option for both listviews, but have only one filter that updates both of them simultaneously.
I've been struggling to figure out how to achieve this, so any tips or suggestions would be greatly appreciated.
Here's a snippet of my current code:
<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 listview has the filter functionality, which should apply to both lists at the same time.
Thank you for any assistance provided!