CODEWITHSUNDEEP
jquerylistmobilefilterformatted
Rufix
Rufix

Reputation: 201

Filtering formated list with jQuery Mobile

So I have a list, formated in following way:

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

How can I filter it only by header part? I'd be grateful for quick answer:)

Upvotes: 1

Views: 2239

Answers (1)

Henry
Henry

Reputation: 2187

jQuery mobile supports filtered lists Nativity, this should be fine for what you want to achieve.

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

Edit:

This demonstrates how to hide and show elements based on the contents of < h2> from a search box. You may need to adapt it for your project but it should get you started.

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>

Upvotes: 2

Related Questions