Фильтрация форматированного списка с помощью jQuery Mobile

Question

Итак, у меня есть список, сформированный следующим образом:

<.ul data-role="listview" data-filter="true">
<.li>
<.h2>header<./h2>
<.p>description<./p>
<./li>
<./ul>

Как я могу отфильтровать его только по части заголовка? Буду благодарен за быстрый ответ :)

Answer 1

jQuery mobile поддерживает отфильтрованные списки Рождества, этого должно быть достаточно для достижения цели.

http://jquerymobile.com/test/docs/lists/docs-lists.html#/test/docs/lists/lists-search.html

Edit:

Это демонстрирует, как скрыть и показать элементы на основе содержимого

из окна поиска. Возможно, вам придется адаптировать его для вашего проекта, но он должен помочь вам начать работу. http://jsfiddle.net/A3qFK/3/ <script> // This makes the contains selector case insensitive // Use :containsCaseInsensitive in place of :contains() jQuery.expr[':'].containsCaseInsensitive = function(a, i, m) { return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; // When a key is pressed, hide and show relevant list items $("#Search").live('keyup', function(e) { var SearchTerm = $(this).val(); // Find items to hide var ItemsToHide = $("li", "#ItemList").not(":containsCaseInsensitive("+ SearchTerm +")"); $(ItemsToHide).hide(); // Find items to show var ItemsToShow = $("h2:containsCaseInsensitive(" + SearchTerm + ")", "#ItemList").parent(); $(ItemsToShow).show(); }); </script> <input type="text" id="Search"> <ul id="ItemList" data-role="listview" data-filter="true"> <li> <h2>Item 1</h2> <p>Winner</p> </li> <li> <h2>Item 2</h2> <p>description</p> </li> <li> <h2>Lorem</h2> <p>Some more content</p> </li> <li> <h2>Ipsum</h2> <p>Content</p> </li> </ul>