jquery - 使用 jQuery Mobile 过滤格式化列表

Question

所以我有一个列表，格式如下：

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

如何仅按标题部分过滤它？我将不胜感激快速回答:)

Answer 1

jQuery mobile 支持过滤列表 Nativity，这对于您想要实现的目标应该没问题。

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

编辑：

这演示了如何在搜索框中根据 <h2> 的内容隐藏和显示元素。您可能需要根据您的项目对其进行调整，但它应该可以帮助您入门。

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>