boa noite,
O JQuery Mobile tem um recurso onde ele adiciona acima da lista um campo para poder digitar e filtrar os dados da lista basta dicionar o valor data-filter="true" na tag da lista, tenho uma aplicação em JQueryMobile, onde nela tenho uma lista e e em um dos itens desta lista tenho outra lista, mas o JQuery mobile está renderizando várias vezes este campo de procura, sendo que deveria renderizar epenas uma vez para a lista principal, alguém tem uma idéia de como posso resolver isto? o código está abaixo, tem a lista com id = "external" é a externa, tem outas 2 "nested", se salvar este código em um arquivo HTML e executar perceberá que vai gerar 3 campos para filtro e não apenas 1.
<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>