Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-27 17:34:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Proper support for lists with search filter and dividers

Browse source
This commit is contained in:
Ernesto Jiménez 2011-02-23 17:42:47 +00:00
parent cbd890daa6
commit dae3e2fa74
5 changed files with 138 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs/lists/index.html
View file

@ -33,7 +33,8 @@
<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>

64
docs/lists/lists-search-with-dividers.html Normal file
View file

@ -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
js/jquery.mobile.listview.filter.js
View file

@ -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();

19
tests/unit/listview/index.html
View file

@ -171,5 +171,24 @@
</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
tests/unit/listview/listview_core.js
View file

@ -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);