Permalink
Browse files

Listview: Updated filter demos to new Filterable widget API

Fixes gh-7279
Closes gh-7488
  • Loading branch information...
1 parent 32224ec commit 5e1a9402a68dfd3658519dc2988ac8a80a6fe8fb @jaspermdegroot jaspermdegroot committed Jun 10, 2014
Showing with 37 additions and 20 deletions.
  1. +6 −3 demos/listview-autocomplete-remote/index.php
  2. +25 −15 demos/listview-autocomplete/index.php
  3. +6 −2 demos/listview/index.php
@@ -62,15 +62,18 @@
<h1>Remote autocomplete</h1>
- <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>
+ <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>
<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>
- <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>
+ <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>
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
- <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>
+ <form class="ui-filterable">
+ <input id="autocomplete-input" data-type="search" placeholder="Find a city...">
+ </form>
+ <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>
</div><!--/demo-html -->
</div><!-- /content -->
@@ -26,22 +26,24 @@
<h1>Autocomplete</h1>
- <p>An autocomplete widget backed by either local or remote data can be created by leveraging the filter feature.
- </p>
+ <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>
<h2>Remote data</h2>
<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>
<h2>Local data</h2>
- <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>
+ <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>
<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>
<h3>Full width listview (non-inset)</h3>
<div data-demo-html="true">
- <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
+ <form class="ui-filterable">
+ <input id="autocomplete-input" data-type="search" placeholder="Search cars...">
+ </form>
+ <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
@@ -69,7 +71,10 @@
<h3>Inset listiew</h3>
<div data-demo-html="true">
- <ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
+ <form class="ui-filterable">
+ <input id="inset-autocomplete-input" data-type="search" placeholder="Search cars...">
+ </form>
+ <ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#inset-autocomplete-input">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
@@ -104,16 +109,21 @@
&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;
</code></pre>
- <ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
- <li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
- <li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
- <li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
- <li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
- <li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="#">IBM</a></li>
- <li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
- <li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
- <li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
- </ul>
+ <div data-demo-html="true">
+ <form class="ui-filterable">
+ <input id="rich-autocomplete-input" data-type="search" placeholder="Search ticker or firm name...">
+ </form>
+ <ul data-role="listview" data-filter="true" data-inset="true" data-input="#rich-autocomplete-input">
+ <li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
+ <li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
+ <li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
+ <li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
+ <li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="#">IBM</a></li>
+ <li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
+ <li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
+ <li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
+ </ul>
+ </div><!--/demo-html -->
</div><!-- /content -->
@@ -98,9 +98,13 @@
</div><!--/demo-html -->
<h2>Filter reveal</h2>
- <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>
+ <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>
<div data-demo-html="true">
- <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
+
+ <form class="ui-filterable">
+ <input id="autocomplete-input" data-type="search" placeholder="Search fruits...">
+ </form>
+ <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autocomplete-input" data-inset="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>

0 comments on commit 5e1a940

Please sign in to comment.