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

Commit 84216a4

Browse files
jaspermdegrootjaspermdegroot
committed
Listview: Updated filter demos to new Filterable widget API
Fixes gh-7279 Closes gh-7488
1 parent f62ec51 commit 84216a4

File tree

3 files changed

+37
-20
lines changed

3 files changed

+37
-20
lines changed

‎demos/listview-autocomplete-remote/index.php

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,18 @@
6262

6363
<h1>Remote autocomplete</h1>
6464

65-
<p>To use the filter as an autocomplete that taps into remote data sources, you can use the <code>filterablebeforefilter</code> event to dynamically populate a listview as a user types a search query.</p>
65+
<p>To create an autocomplete that uses a remote data source, you can use the <code>filterablebeforefilter</code> event of the Filterable widget to dynamically populate a listview as a user types a search query.</p>
6666

6767
<p>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>
68-
<p>If you have a small list of items, you can use the <a href="../listview/">listview</a> filter reveal option to make an autocomplete with local listview data.</p>
68+
<p>If you have a small list of items, you can use the filter reveal option to make an <a href="../listview-autocomplete/">autocomplete with local listview data</a>.</p>
6969

7070
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
7171
<h3>Cities worldwide</h3>
7272
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
73-
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>
73+
<form class="ui-filterable">
74+
<input id="autocomplete-input" data-type="search" placeholder="Find a city...">
75+
</form>
76+
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>
7477
</div><!--/demo-html -->
7578

7679
</div><!-- /content -->

‎demos/listview-autocomplete/index.php

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,24 @@
2626

2727
<h1>Autocomplete</h1>
2828

29-
<p>An autocomplete widget backed by either local or remote data can be created by leveraging the filter feature.
30-
</p>
29+
<p>An autocomplete widget backed by either local or remote data can be created by using the <a href="../filterable/" data-ajax="false">Filterable widget</a> on a listview.</p>
3130

3231
<h2>Remote data</h2>
3332

3433
<p>To use the filter as an autocomplete that taps into remote data sources, you can use the <code>filterablebeforefilter</code> event to dynamically populate a listview as a user types a search query: <a href="../listview-autocomplete-remote/" data-ajax="false">Remote autocomplete demo</a></p>
3534

3635
<h2>Local data</h2>
3736

38-
<p>The filter reveal feature makes it 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>
37+
<p>The filter reveal feature of the Filterable widget makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the <code>data-filter-reveal="true"</code> attribute, it will auto-hide all the list items when the search field is blank.</p>
3938
<p>Any 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.</p>
4039

4140
<h3>Full width listview (non-inset)</h3>
4241

4342
<div data-demo-html="true">
44-
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
43+
<form class="ui-filterable">
44+
<input id="autocomplete-input" data-type="search" placeholder="Search cars...">
45+
</form>
46+
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input">
4547
<li><a href="#">Acura</a></li>
4648
<li><a href="#">Audi</a></li>
4749
<li><a href="#">BMW</a></li>
@@ -69,7 +71,10 @@
6971

7072
<h3>Inset listiew</h3>
7173
<div data-demo-html="true">
72-
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
74+
<form class="ui-filterable">
75+
<input id="inset-autocomplete-input" data-type="search" placeholder="Search cars...">
76+
</form>
77+
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#inset-autocomplete-input">
7378
<li><a href="#">Acura</a></li>
7479
<li><a href="#">Audi</a></li>
7580
<li><a href="#">BMW</a></li>
@@ -104,16 +109,21 @@
104109
&lt;li <strong>data-filtertext=&quot;USA U.S.A. United States of America&quot;</strong>&gt;&lt;a href=&quot;#&quot;&gt;United States&lt;/a&gt;&lt;/li&gt;
105110
</code></pre>
106111

107-
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
108-
<li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
109-
<li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
110-
<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
111-
<li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
112-
<li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="#">IBM</a></li>
113-
<li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
114-
<li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
115-
<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
116-
</ul>
112+
<div data-demo-html="true">
113+
<form class="ui-filterable">
114+
<input id="rich-autocomplete-input" data-type="search" placeholder="Search ticker or firm name...">
115+
</form>
116+
<ul data-role="listview" data-filter="true" data-inset="true" data-input="#rich-autocomplete-input">
117+
<li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
118+
<li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
119+
<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
120+
<li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
121+
<li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="#">IBM</a></li>
122+
<li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
123+
<li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
124+
<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
125+
</ul>
126+
</div><!--/demo-html -->
117127

118128
</div><!-- /content -->
119129

‎demos/listview/index.php

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,13 @@
9898
</div><!--/demo-html -->
9999

100100
<h2>Filter reveal</h2>
101-
<p>The filter reveal feature makes it easy to build a simple autocomplete with local data. When a filterable list has the <code>data-filter-reveal="true"</code> attribute, 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. If you need to search against a long list of values, we provide a way to create a filter with a <a href="../listview-autocomplete-remote/" data-ajax="false">remote data source</a>.</p>
101+
<p>The filter reveal feature of the <a href="../filterable/" data-ajax="false">Filterable widget</a> makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the <code>data-filter-reveal="true"</code> attribute, it will auto-hide all the list items when the search field is blank. If you need to search against a long list of values, we provide a way to create a filter with a <a href="../listview-autocomplete-remote/" data-ajax="false">remote data source</a>.</p>
102102
<div data-demo-html="true">
103-
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
103+
104+
<form class="ui-filterable">
105+
<input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
106+
</form>
107+
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input" data-inset="true">
104108
<li><a href="#">Apple</a></li>
105109
<li><a href="#">Banana</a></li>
106110
<li><a href="#">Cherry</a></li>

0 commit comments

Comments
 (0)