problems with nested listviews and data filter
Good afternoon.
i have a application with two nested listviews, in another words, i have a listview, and into a <li> tag i have another listview, the issue is the data-filter which i put in the external listview, but the jquery mobile render for the nested listview too, then my application appears several search fields which do the same thing rather than filter each list. the jquery mobile build a data filter field for each list, i try to put data-filter="false" in the nested listview but no works. how i can solve this problem??? the code of my test it´s bellow
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>My Title</h1>
- </div><!-- /header -->
- <div data-role="content">
- <ul id="external" data-role="listview" data-theme="b" data-filter="true">
- <li>
- <div data-role="collapsible">
- <h3>first</h3>
- <p> 1 </p>
-
- <ul id="nested" data-role="listview" data-inset="true" data-filter="false">
- <li> <a> 1 nested </a> </li>
- <li> <a> 2 nested </a> </li>
- <li> <a> 3 nested </a> </li>
- </ul>
- </div>
- </li>
- <li>
- <div data-role="collapsible">
- <h3>Second</h3>
- <p> 2 </p>
-
- <ul id="nested2" data-role="listview" data-inset="true" data-filter="false">
- <li> <a> 4 nested </a> </li>
- <li> <a> 5 nested </a> </li>
- </ul>
- </div>
- </li>
- <li>
- <div data-role="collapsible">
- <h3>Third</h3>
- <p> 3 </p>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </html>