jquery - jQuery Mobile を使用したフォーマット済みリストのフィルタリング

Question

だから私は次のようにフォーマットされたリストを持っています:

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

ヘッダー部分だけでフィルタリングするにはどうすればよいですか? 迅速な回答に感謝します:)

Answer 1

jQuery モバイルは、フィルタリングされたリストの降誕をサポートしています。これは、達成したいことには問題ありません。

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>