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

Merge pull request #3158 from jakeboone02/docs-filtertext

Browse source 
Document data-filtertext attribute for listview items
This commit is contained in:
Todd Parker 2011-11-24 09:24:15 -08:00
commit 88023f8dab
24 changed files with 131 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/api/data-attributes.html
View file

@ -290,6 +290,10 @@
<h2><a href="../lists/docs-lists.html">Listview item</a></h2>
<p>LI within a listview</p>
<table>
<tr>
<th>data-filtertext</th>
<td>string (filter by this value instead of inner text)</td>
</tr>
<tr>
<th>data-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>

13
docs/lists/docs-lists.html
View file

@ -73,13 +73,13 @@
<p>If you want to change the way in which list items are filtered, ie fuzzy search or matching from the beginning of the string, you can configure the callback used internally by defining <code>$.mobile.listview.prototype.options.filterCallback</code> during <code>mobileinit</code> or after the widget has been created with <code>$("#mylist").listview('option', 'filterCallback', yourFilterFunction)</code>. Any function defined for the callback will be provided two arguments. First, the text of the current list item and second, the value being searched for. A truthy value will result in a hidden list item. The default callback which filters entries without the <code>searchValue</code> as a substring is described below:
</p>
<pre>
<code>
function( text, searchValue ){
<pre><code>function( text, searchValue ){
return text.toLowerCase().indexOf( searchValue ) === -1;
};
</code>
</pre>
};</code></pre>
<p>To filter list items by values other than the text, add a <code>data-filtertext</code> attribute to the list item. The value of this attribute will be passed as the first argument to the <code>filterCallback</code> function instead of the text.</p>
<a href="lists-search-filtertext.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Hidden data filter example</a>
<h2>Text formatting &amp; counts</h2>
<p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information and counts through semantic HTML markup.</p>
@ -138,6 +138,7 @@ function( text, searchValue ){
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

3
docs/lists/index.html
View file

@ -41,7 +41,8 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
<li><a href="lists-forms.html">Lists with forms</a></li>

1
docs/lists/lists-all-full.html
View file

@ -145,6 +145,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-count.html
View file

@ -54,6 +54,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-divider.html
View file

@ -85,6 +85,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-formatting.html
View file

@ -105,6 +105,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-forms-inset.html
View file

@ -220,6 +220,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-forms.html
View file

@ -220,6 +220,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-icons.html
View file

@ -60,6 +60,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-inset.html
View file

@ -146,6 +146,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-nested.html
View file

@ -165,6 +165,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-ol.html
View file

@ -69,6 +69,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-performance.html
View file

@ -549,6 +549,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-readonly-inset.html
View file

@ -142,6 +142,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li data-theme="a"><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-readonly.html
View file

@ -144,6 +144,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li data-theme="a"><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

98
docs/lists/lists-search-filtertext.html Normal file
View file

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Filtered Lists Using Hidden Data</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Search hidden data</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">
<div class="content-primary">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search country of headquarters...">
<li data-filtertext="Japan"><a href="index.html">Acura</a></li>
<li data-filtertext="Germany"><a href="index.html">Audi</a></li>
<li data-filtertext="Germany"><a href="index.html">BMW</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="index.html">Cadillac</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="index.html">Chrysler</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="index.html">Dodge</a></li>
<li data-filtertext="Italy"><a href="index.html">Ferrari</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="index.html">Ford</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="index.html">GMC</a></li>
<li data-filtertext="Japan"><a href="index.html">Honda</a></li>
<li data-filtertext="South Korea"><a href="index.html">Hyundai</a></li>
<li data-filtertext="Japan"><a href="index.html">Infiniti</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="index.html">Jeep</a></li>
<li data-filtertext="South Korea"><a href="index.html">Kia</a></li>
<li data-filtertext="Japan"><a href="index.html">Lexus</a></li>
<li data-filtertext="UK U.K. United Kingdom Great Britian"><a href="index.html">Mini</a></li>
<li data-filtertext="Japan"><a href="index.html">Nissan</a></li>
<li data-filtertext="Germany"><a href="index.html">Porsche</a></li>
<li data-filtertext="Japan"><a href="index.html">Subaru</a></li>
<li data-filtertext="Japan"><a href="index.html">Toyota</a></li>
<li data-filtertext="Germany"><a href="index.html">Volkswagon</a></li>
<li data-filtertext="Sweden"><a href="index.html">Volvo</a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">List views</li>
<li><a href="docs-lists.html">List markup conventions</a></li>
<li><a href="lists-ul.html">Basic linked list</a></li>
<li><a href="lists-nested.html">Nested list</a></li>
<li><a href="lists-ol.html">Numbered list</a></li>
<li><a href="lists-split.html">Split button list</a></li>
<li><a href="lists-divider.html">List dividers</a></li>
<li><a href="lists-count.html">Count bubble</a></li>
<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-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li data-theme="a"><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
<li><a href="lists-forms.html">Lists with forms</a></li>
<li><a href="lists-forms-inset.html">Inset lists with forms</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>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

1
docs/lists/lists-search-inset.html
View file

@ -71,6 +71,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li data-theme="a"><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-search-with-dividers.html
View file

@ -84,6 +84,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li data-theme="a"><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-search.html
View file

@ -71,6 +71,7 @@
<li data-theme="a"><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-split.html
View file

@ -118,6 +118,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-themes.html
View file

@ -235,6 +235,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-thumbnails.html
View file

@ -106,6 +106,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>

1
docs/lists/lists-ul.html
View file

@ -72,6 +72,7 @@
<li><a href="lists-search.html">Search filter bar</a></li>
<li><a href="lists-search-inset.html">Inset search filter bar</a></li>
<li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
<li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
<li><a href="lists-readonly.html">Read-only lists</a></li>
<li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>