Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Proper support for lists with search filter and dividers #1139

Merged
1 commit merged into from
Feb 24, 2011
Merged

Proper support for lists with search filter and dividers #1139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/lists/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ <h1>Lists</h1>
<li><a href="lists-thumbnails.html">Thumbnails</a></li>
<li><a href="lists-icons.html">Icons</a></li>
<li><a href="lists-formatting.html">Content formatting</a></li>
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-inset.html">Inset styled lists</a></li>
<li><a href="lists-performance.html">List performance test</a></li>
<li><a href="lists-themes.html">Theming lists</a></li>
Expand Down
64 changes: 64 additions & 0 deletions docs/lists/lists-search-with-dividers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Docs - Lists</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="b">
<h1>List dividers</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->

<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
<li data-role="list-divider">D</li>
<li><a href="index.html">David Walsh</a></li>
<li><a href="index.html">Drake Alfred</a></li>
<li data-role="list-divider">E</li>
<li><a href="index.html">Elizabeth Bacon</a></li>
<li><a href="index.html">Emery Parker</a></li>
<li><a href="index.html">Enid Voldon</a></li>
<li data-role="list-divider">F</li>
<li><a href="index.html">Francis Wall</a></li>
<li data-role="list-divider">G</li>
<li><a href="index.html">Graham Smith</a></li>
<li><a href="index.html">Greta Peete</a></li>
<li data-role="list-divider">H</li>
<li><a href="index.html">Harvey Walls</a></li>
<li data-role="list-divider">M</li>
<li><a href="index.html">Mike Farnsworth</a></li>
<li><a href="index.html">Murray Vanderbuilt</a></li>
<li data-role="list-divider">N</li>
<li><a href="index.html">Nathan Williams</a></li>
<li data-role="list-divider">P</li>
<li><a href="index.html">Paul Baker</a></li>
<li><a href="index.html">Pete Mason</a></li>
<li data-role="list-divider">R</li>
<li><a href="index.html">Rod Tarker</a></li>
<li data-role="list-divider">S</li>
<li><a href="index.html">Sawyer Wakefield</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
28 changes: 23 additions & 5 deletions js/jquery.mobile.listview.filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
19 changes: 19 additions & 0 deletions tests/unit/listview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,5 +171,24 @@ <h1>Split List View</h1>
</div>
</div>

<!-- Search bar filter with list-dividers -->
<div data-role="page" id='search-filter-with-dividers-test'>
<div data-role="header" data-position="inline">
<h1>Split List View</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">a</li>
<li>a is for aquaman</li>
<li data-role="list-divider">b</li>
<li>b is for batman</li>
<li data-role="list-divider">c</li>
<li>c is for catwoman</li>
<li data-role="list-divider">d</li>
<li>d is for darkwing</li>
</ul>
</div>
</div>

</body>
</html>
30 changes: 30 additions & 0 deletions tests/unit/listview/listview_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);