過濾與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>