过滤与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>