Skip to content

Commit 4049ae5

Browse files
toddparkertoddparker
committed
Demos: Split out the listview filter reveal as a new page, improved descriptions for remote autocomplete demo
1 parent 6115db8 commit 4049ae5

File tree

4 files changed

+118
-66
lines changed

4 files changed

+118
-66
lines changed

‎docs/demos/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,11 @@ <h2>Demos</h2>
5151
<li><a href="collapsibles/collapsible-set.html" data-ajax="false">Collapsible Set</a></li>
5252
<li data-role="list-divider">Listviews</li>
5353
<li><a href="listviews/listview.html" data-ajax="false">Listviews</a></li>
54-
<li><a href="listviews/listview-filter-autodividers.html" data-ajax="false">Listview Filter &amp; Autodividers</a></li>
55-
<li><a href="listviews/listview-filter-autocomplete.html" data-ajax="false">Autocomplete from a remote source using listview</a></li>
56-
<li><a href="listviews/listview-forms.html" data-ajax="false">Listview Forms</a></li>
57-
<li><a href="listviews/collapsible-listview.html" data-ajax="false">Collapsible listview</a></li>
54+
<li><a href="listviews/listview-filter-autodividers.html" data-ajax="false">Listview Autodividers</a></li>
55+
<li><a href="listviews/listview-filter-reveal.html" data-ajax="false">Autocomplete listview from a local source</a></li>
56+
<li><a href="listviews/listview-filter-autocomplete.html" data-ajax="false">Autocomplete listview from a remote source</a></li>
57+
<li><a href="listviews/listview-forms.html" data-ajax="false">Forms in listviews</a></li>
58+
<li><a href="listviews/collapsible-listview.html" data-ajax="false">Collapsible listviews</a></li>
5859
<li data-role="list-divider">Grids</li>
5960
<li><a href="grids/rwd-basics.html" data-ajax="false">Responsive (RWD) basics</a></li>
6061
<li><a href="grids/grid-stack.html" data-ajax="false">Responsive grids, stack at mobile</a></li>

‎docs/demos/listviews/listview-filter-autocomplete.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,17 @@ <h1>Listview Autocomplete</h1>
5858

5959
<div class="content-primary">
6060

61-
<h2>Cities worldwide</h2>
61+
<h2>Remote autocomplete with listview filter</h2>
62+
63+
<p>To use the listview filter as an autocomplete that taps into remote data sources, you can use the <code>listviewbeforefilter</code> event to dynamically populate a listview as a user types a search query. This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.</p>
64+
<p>If you have a small list of items, you can use the listview <a href="listview-filter-reveal.html">filter reveal option</a> to make an autocomplete with local listview data.</p>
65+
66+
6267

6368
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
64-
<p>After you entered at least three characters the autocomplete function will show all possible matches.</p>
65-
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="d"></ul>
69+
<h3>Cities worldwide</h3>
70+
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
71+
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>
6672
</div><!--/demo-html -->
6773

6874

‎docs/demos/listviews/listview-filter-autodividers.html

Lines changed: 4 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@ <h1>Listview Filter &amp; Autodividers</h1>
2121
<div data-role="content">
2222

2323
<div class="content-primary">
24-
25-
<h2>Non-inset</h2>
24+
25+
<h2>Auto-divider listviews</h2>
26+
<p>The auto-divider option is a convenient way to automatically add dividers for each letter by adding the <code> data-autodividers="true"</code> attribute. This is designed to work in conjunction with the listview filter feature so as items are filtered away, dividers that don't have any visible items will also be hidden.</p>
2627

2728
<h3>Filter, Autodividers</h3>
2829

@@ -54,38 +55,9 @@ <h3>Filter, Autodividers</h3>
5455
</ul>
5556
</div><!--/demo-html -->
5657

57-
<h3>Filter reveal</h3>
58-
59-
<div data-demo-html="true">
60-
<ul data-role="listview" data-filter="true" data-filter-reveal="true">
61-
<li><a href="index.html">Acura</a></li>
62-
<li><a href="index.html">Audi</a></li>
63-
<li><a href="index.html">BMW</a></li>
64-
<li><a href="index.html">Cadillac</a></li>
65-
<li><a href="index.html">Chrysler</a></li>
66-
<li><a href="index.html">Dodge</a></li>
67-
<li><a href="index.html">Ferrari</a></li>
68-
<li><a href="index.html">Ford</a></li>
69-
<li><a href="index.html">GMC</a></li>
70-
<li><a href="index.html">Honda</a></li>
71-
<li><a href="index.html">Hyundai</a></li>
72-
<li><a href="index.html">Infiniti</a></li>
73-
<li><a href="index.html">Jeep</a></li>
74-
<li><a href="index.html">Kia</a></li>
75-
<li><a href="index.html">Lexus</a></li>
76-
<li><a href="index.html">Mini</a></li>
77-
<li><a href="index.html">Nissan</a></li>
78-
<li><a href="index.html">Porsche</a></li>
79-
<li><a href="index.html">Subaru</a></li>
80-
<li><a href="index.html">Toyota</a></li>
81-
<li><a href="index.html">Volkswagon</a></li>
82-
<li><a href="index.html">Volvo</a></li>
83-
</ul>
84-
</div><!--/demo-html -->
8558

86-
<h2>Inset</h2>
8759

88-
<h3>Filter, Autodividers</h3>
60+
<h3>Inset filter, Autodividers</h3>
8961

9062
<div data-demo-html="true">
9163
<ul data-role="listview" data-inset="true" data-filter-theme="d" data-divider-theme="c" data-filter="true" data-autodividers="true">
@@ -115,34 +87,7 @@ <h3>Filter, Autodividers</h3>
11587
</ul>
11688
</div><!--/demo-html -->
11789

118-
<h3>Filter reveal</h3>
11990

120-
<div data-demo-html="true">
121-
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true">
122-
<li><a href="index.html">Acura</a></li>
123-
<li><a href="index.html">Audi</a></li>
124-
<li><a href="index.html">BMW</a></li>
125-
<li><a href="index.html">Cadillac</a></li>
126-
<li><a href="index.html">Chrysler</a></li>
127-
<li><a href="index.html">Dodge</a></li>
128-
<li><a href="index.html">Ferrari</a></li>
129-
<li><a href="index.html">Ford</a></li>
130-
<li><a href="index.html">GMC</a></li>
131-
<li><a href="index.html">Honda</a></li>
132-
<li><a href="index.html">Hyundai</a></li>
133-
<li><a href="index.html">Infiniti</a></li>
134-
<li><a href="index.html">Jeep</a></li>
135-
<li><a href="index.html">Kia</a></li>
136-
<li><a href="index.html">Lexus</a></li>
137-
<li><a href="index.html">Mini</a></li>
138-
<li><a href="index.html">Nissan</a></li>
139-
<li><a href="index.html">Porsche</a></li>
140-
<li><a href="index.html">Subaru</a></li>
141-
<li><a href="index.html">Toyota</a></li>
142-
<li><a href="index.html">Volkswagon</a></li>
143-
<li><a href="index.html">Volvo</a></li>
144-
</ul>
145-
</div><!--/demo-html -->
14691

14792
</div><!--/content-primary -->
14893

‎docs/demos/listviews/listview-filter-reveal.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Listview Filter &amp; Autodividers - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../_assets/js/"></script>
11+
<script src="../../../js/"></script>
12+
</head>
13+
<body>
14+
<div data-role="page">
15+
16+
<div data-role="header" data-theme="f">
17+
<h1>Listview Filter</h1>
18+
<a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
19+
</div><!-- /header -->
20+
21+
<div data-role="content">
22+
23+
<div class="content-primary">
24+
25+
<h2>Local autocomplete with listview filter reveal</h2>
26+
<p>The filter reveal feature makes is easy to build a simple autocomplete with local data. When a filterable list has the <code>data-filter-reveal="true"</code>, it will auto-hide all the list items when the search field is blank. The <code>data-filter-placeholder</code> attribute can be added to specify the placeholder text for the filter.</p>
27+
<p>Any listview filter with more than 100-200 items may be slow to perform on a mobile device so we recommend using this feature for autocomplete situations with a relatively small number of items. If you need to search against a longer list of values, we provide a way to create a filter with a <a href="listview-filter-autocomplete.html" data-ajax="false">remote data source</a>.</p>
28+
29+
<h3>Filter reveal</h3>
30+
31+
<div data-demo-html="true">
32+
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
33+
<li><a href="index.html">Acura</a></li>
34+
<li><a href="index.html">Audi</a></li>
35+
<li><a href="index.html">BMW</a></li>
36+
<li><a href="index.html">Cadillac</a></li>
37+
<li><a href="index.html">Chrysler</a></li>
38+
<li><a href="index.html">Dodge</a></li>
39+
<li><a href="index.html">Ferrari</a></li>
40+
<li><a href="index.html">Ford</a></li>
41+
<li><a href="index.html">GMC</a></li>
42+
<li><a href="index.html">Honda</a></li>
43+
<li><a href="index.html">Hyundai</a></li>
44+
<li><a href="index.html">Infiniti</a></li>
45+
<li><a href="index.html">Jeep</a></li>
46+
<li><a href="index.html">Kia</a></li>
47+
<li><a href="index.html">Lexus</a></li>
48+
<li><a href="index.html">Mini</a></li>
49+
<li><a href="index.html">Nissan</a></li>
50+
<li><a href="index.html">Porsche</a></li>
51+
<li><a href="index.html">Subaru</a></li>
52+
<li><a href="index.html">Toyota</a></li>
53+
<li><a href="index.html">Volkswagon</a></li>
54+
<li><a href="index.html">Volvo</a></li>
55+
</ul>
56+
</div><!--/demo-html -->
57+
58+
59+
60+
<h3>Filter reveal, inset</h3>
61+
62+
<div data-demo-html="true">
63+
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
64+
<li><a href="index.html">Acura</a></li>
65+
<li><a href="index.html">Audi</a></li>
66+
<li><a href="index.html">BMW</a></li>
67+
<li><a href="index.html">Cadillac</a></li>
68+
<li><a href="index.html">Chrysler</a></li>
69+
<li><a href="index.html">Dodge</a></li>
70+
<li><a href="index.html">Ferrari</a></li>
71+
<li><a href="index.html">Ford</a></li>
72+
<li><a href="index.html">GMC</a></li>
73+
<li><a href="index.html">Honda</a></li>
74+
<li><a href="index.html">Hyundai</a></li>
75+
<li><a href="index.html">Infiniti</a></li>
76+
<li><a href="index.html">Jeep</a></li>
77+
<li><a href="index.html">Kia</a></li>
78+
<li><a href="index.html">Lexus</a></li>
79+
<li><a href="index.html">Mini</a></li>
80+
<li><a href="index.html">Nissan</a></li>
81+
<li><a href="index.html">Porsche</a></li>
82+
<li><a href="index.html">Subaru</a></li>
83+
<li><a href="index.html">Toyota</a></li>
84+
<li><a href="index.html">Volkswagon</a></li>
85+
<li><a href="index.html">Volvo</a></li>
86+
</ul>
87+
</div><!--/demo-html -->
88+
89+
</div><!--/content-primary -->
90+
91+
</div><!-- /content -->
92+
93+
<div class="jqm-footer">
94+
<p class="jqm-version"></p>
95+
<p>&copy; 2012 jQuery Foundation and other contributors</p>
96+
</div><!-- /jqm-footer -->
97+
98+
</div><!-- /page -->
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)