diff --git a/docs/lists/index.html b/docs/lists/index.html index 83125b49aca..2f46b84760f 100755 --- a/docs/lists/index.html +++ b/docs/lists/index.html @@ -33,7 +33,8 @@

Lists

  • Thumbnails
  • Icons
  • Content formatting
    • -
  • Search filter bar
    • +
  • Search filter bar
    • +
  • Search filter bar with dividers
  • Inset styled lists
  • List performance test
  • Theming lists
    • diff --git a/docs/lists/lists-search-with-dividers.html b/docs/lists/lists-search-with-dividers.html new file mode 100644 index 00000000000..24d48f406a0 --- /dev/null +++ b/docs/lists/lists-search-with-dividers.html @@ -0,0 +1,64 @@ + + + + + jQuery Mobile Docs - Lists + + + + + + + + +
    + +
    +

    List dividers

    + Home +
    + +
    + +
    +
    + + + \ No newline at end of file diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js index f72aa47bb5a..3a56fdfa8d4 100644 --- a/js/jquery.mobile.listview.filter.js +++ b/js/jquery.mobile.listview.filter.js @@ -22,12 +22,30 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() { "data-type": "search" }) .bind( "keyup change", function() { - var val = this.value.toLowerCase();; - list.children().show(); + var val = this.value.toLowerCase(), + list_items = list.children(); + list_items.show(); if ( val ) { - list.children().filter(function() { - return $( this ).text().toLowerCase().indexOf( val ) === -1; - }).hide(); + // This handles hiding regular rows without the text we search for + // and any list dividers without regular rows shown under it + var any_in_the_bucket = false, + item; + + for (var i = list_items.length; i >= 0; i--) { + item = $(list_items[i]); + if (item.is("li[data-role=list-divider]")) { + if (!any_in_the_bucket) { + item.hide(); + } + // New bucket! + any_in_the_bucket = false; + } else if (item.text().toLowerCase().indexOf( val ) === -1) { + item.hide(); + } else { + // There's a shown item in the bucket + any_in_the_bucket = true; + } + } } //listview._numberItems(); diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html index 13873069440..10f52942aaf 100644 --- a/tests/unit/listview/index.html +++ b/tests/unit/listview/index.html @@ -171,5 +171,24 @@

    Split List View

    + +
    +
    +

    Split List View

    +
    +
    + +
    +
    + diff --git a/tests/unit/listview/listview_core.js b/tests/unit/listview/listview_core.js index 7063b6798e2..1a837209a52 100644 --- a/tests/unit/listview/listview_core.js +++ b/tests/unit/listview/listview_core.js @@ -216,4 +216,34 @@ ul.listview('refresh'); ok(ul.find("#fiz img").hasClass("ui-li-thumb")); }); + + + module( "Search Filter with dividers", { + setup: function(){ + location.href = location.href.split('#')[0] + "#search-filter-with-dividers-test"; + } + }); + + asyncTest( "Filter downs results when the user enters information", function() { + $('.ui-page-active input').val('at'); + $('.ui-page-active input').trigger('change'); + + setTimeout(function() { + same($('.ui-page-active li[style^="display: none;"]').length, 4); + same($('.ui-page-active li[data-role=list-divider][style^="display: none;"]').length, 2); + same($('.ui-page-active li:not([data-role=list-divider])[style^="display: none;"]').length, 2); + start(); + }, 1000); + }); + + asyncTest( "Redisplay results when user removes values", function() { + $('.ui-page-active input').val('a'); + $('.ui-page-active input').trigger('change'); + setTimeout(function() { + same($('.ui-page-active input').val(), 'a'); + same($('.ui-page-active li[style^="display: none;"]').length, 0); + start(); + }, 1000); + }); + })(jQuery); \ No newline at end of file