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

Commit

Permalink
Listview: Updated filter demos to new Filterable widget API
Browse files Browse the repository at this point in the history 
Fixes gh-7279
Closes gh-7488
  • Loading branch information
@jaspermdegroot
jaspermdegroot committed Aug 25, 2014
1 parent 32224ec commit 5e1a940
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 20 deletions.
9 changes: 6 additions & 3 deletions demos/listview-autocomplete-remote/index.php
View file
Expand Up @@ -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 -->
Expand Down
40 changes: 25 additions & 15 deletions demos/listview-autocomplete/index.php
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 -->

Expand Down
8 changes: 6 additions & 2 deletions demos/listview/index.php
View file
Expand Up @@ -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>
Expand Down

0 comments on commit 5e1a940

Please sign in to comment.