5
<title>Example: Filter a Set of Existing Items on a Page</title>
6
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
<link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
<link rel="stylesheet" href="../assets/css/main.css">
9
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
<script src="../../build/yui/yui-min.js"></script>
15
<h1>Example: Filter a Set of Existing Items on a Page</h1>
20
<div class="yui3-u-3-4">
22
<div class="content"><div class="intro">
24
This example demonstrates how to use <code>AutoCompleteBase</code> alone, without a list widget, to filter a set of existing items on a page. While this is a departure from the typical autocomplete interaction pattern, <code>AutoCompleteBase</code> is flexible enough to provide an excellent solution without any unnecessary overhead.
28
To filter the list of delicious pies, type a descriptive term into the input field below. For example, to see only apple pies, type "apple", or for all fruit pies, type "fruit".
35
border: 1px solid #cfcfcf;
42
display: inline-block;
45
/* fake inline-block for IE<8 */
50
#photos .empty { font-style: italic; }
59
border: 1px solid #000;
64
#photos .hidden { display: none; }
67
<div id="demo" class="yui3-skin-sam">
68
<label for="ac-input">Filter by:</label><br>
69
<input id="ac-input" type="text">
72
<li class="photo" data-tags="apple, fruit">
73
<a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
74
<img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
78
<li class="photo" data-tags="pecan">
79
<a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
80
<img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
84
<li class="photo" data-tags="maple custard">
85
<a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
86
<img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
90
<li class="photo" data-tags="pumpkin">
91
<a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
92
<img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
96
<li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
97
<a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
98
<img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
102
<li class="photo" data-tags="cherry, hearts, fruit">
103
<a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
104
<img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
108
<li class="photo" data-tags="lattice, sour cherry, fruit">
109
<a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
110
<img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
114
<li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
115
<a href="http://www.flickr.com/photos/faerye/4283875981/">
116
<img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
120
<li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
121
<a href="http://www.flickr.com/photos/faerye/4592482821/">
122
<img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
126
<li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
127
<a href="http://www.flickr.com/photos/faerye/3492566166/">
128
<img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
132
<li class="photo" data-tags="lattice top, apple, fruit">
133
<a href="http://www.flickr.com/photos/faerye/3394679580/">
134
<img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
141
YUI().use('autocomplete-base', 'autocomplete-filters', function (Y) {
142
// Create a custom PieFilter class that extends AutoCompleteBase.
143
var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
144
initializer: function () {
145
this._bindUIACBase();
146
this._syncUIACBase();
150
// Create and configure an instance of the PieFilter class.
151
filter = new PieFilter({
152
inputNode: '#ac-input',
156
// Run an immediately-invoked function that returns an array of results to
157
// be used for each query, based on the photos on the page. Since the list
158
// of photos remains static, this saves time by not gathering the results
161
// If the list of results were not static, we could simply set the source
162
// to the function itself rather than invoking the function immediately,
163
// and it would then run on every query.
164
source: (function () {
167
// Build an array of results containing each photo in the list.
168
Y.all('#photos > .photo').each(function (node) {
171
tags: node.getAttribute('data-tags')
176
}()), // <-- Note the parens. This invokes the function immediately.
177
// Remove these to invoke the function on every query instead.
179
// Specify that the "tags" property of each result object contains the text
181
resultTextLocator: 'tags',
183
// Use a result filter to filter the photo results based on their tags.
184
resultFilters: 'phraseMatch'
187
// Subscribe to the "results" event and update photo visibility based on
188
// whether or not they were included in the list of results.
189
filter.on('results', function (e) {
190
// First hide all the photos.
191
Y.all('#photos > .photo').addClass('hidden');
193
// Then unhide the ones that are in the current result list.
194
Y.Array.each(e.results, function (result) {
195
result.raw.node.removeClass('hidden');
205
<pre class="code prettyprint"><div id="demo" class="yui3-skin-sam">
206
<label for="ac-input">Filter by:</label><br>
207
<input id="ac-input" type="text">
209
<ul id="photos">
210
<li class="photo" data-tags="apple, fruit">
211
<a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
212
<img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
216
<li class="photo" data-tags="pecan">
217
<a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
218
<img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
222
<li class="photo" data-tags="maple custard">
223
<a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
224
<img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
228
<li class="photo" data-tags="pumpkin">
229
<a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
230
<img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
234
<li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
235
<a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
236
<img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
240
<li class="photo" data-tags="cherry, hearts, fruit">
241
<a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
242
<img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
246
<li class="photo" data-tags="lattice, sour cherry, fruit">
247
<a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
248
<img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
252
<li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
253
<a href="http://www.flickr.com/photos/faerye/4283875981/">
254
<img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
258
<li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
259
<a href="http://www.flickr.com/photos/faerye/4592482821/">
260
<img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
264
<li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
265
<a href="http://www.flickr.com/photos/faerye/3492566166/">
266
<img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
270
<li class="photo" data-tags="lattice top, apple, fruit">
271
<a href="http://www.flickr.com/photos/faerye/3394679580/">
272
<img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
276
</div></pre>
281
<pre class="code prettyprint lang-css">#photos {
282
border: 1px solid #cfcfcf;
289
display: inline-block;
292
/* fake inline-block for IE<8 */
297
#photos .empty { font-style: italic; }
306
border: 1px solid #000;
310
#photos .hidden { display: none; }</pre>
315
<pre class="code prettyprint">YUI().use('autocomplete-base', 'autocomplete-filters', function (Y) {
316
// Create a custom PieFilter class that extends AutoCompleteBase.
317
var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
318
initializer: function () {
319
this._bindUIACBase();
320
this._syncUIACBase();
324
// Create and configure an instance of the PieFilter class.
325
filter = new PieFilter({
326
inputNode: '#ac-input',
330
// Run an immediately-invoked function that returns an array of results to
331
// be used for each query, based on the photos on the page. Since the list
332
// of photos remains static, this saves time by not gathering the results
333
// for each query.
335
// If the list of results were not static, we could simply set the source
336
// to the function itself rather than invoking the function immediately,
337
// and it would then run on every query.
338
source: (function () {
341
// Build an array of results containing each photo in the list.
342
Y.all('#photos > .photo').each(function (node) {
345
tags: node.getAttribute('data-tags')
350
}()), // <-- Note the parens. This invokes the function immediately.
351
// Remove these to invoke the function on every query instead.
353
// Specify that the "tags" property of each result object contains the text
354
// to filter on.
355
resultTextLocator: 'tags',
357
// Use a result filter to filter the photo results based on their tags.
358
resultFilters: 'phraseMatch'
361
// Subscribe to the "results" event and update photo visibility based on
362
// whether or not they were included in the list of results.
363
filter.on('results', function (e) {
364
// First hide all the photos.
365
Y.all('#photos > .photo').addClass('hidden');
367
// Then unhide the ones that are in the current result list.
368
Y.Array.each(e.results, function (result) {
369
result.raw.node.removeClass('hidden');
375
<h2>Complete Example Source</h2>
377
<pre class="code prettyprint"><style scoped>
379
border: 1px solid #cfcfcf;
386
display: inline-block;
389
/* fake inline-block for IE<8 */
394
#photos .empty { font-style: italic; }
403
border: 1px solid #000;
408
#photos .hidden { display: none; }
411
<div id="demo" class="yui3-skin-sam">
412
<label for="ac-input">Filter by:</label><br>
413
<input id="ac-input" type="text">
415
<ul id="photos">
416
<li class="photo" data-tags="apple, fruit">
417
<a href="http://www.flickr.com/photos/wonko/5213328415/in/photostream/">
418
<img src="http://farm6.static.flickr.com/5002/5213328415_4cf3aa583f_m.jpg" alt="Apple pie">
422
<li class="photo" data-tags="pecan">
423
<a href="http://www.flickr.com/photos/wonko/5213327801/in/photostream/">
424
<img src="http://farm6.static.flickr.com/5208/5213327801_1e62145da1_m.jpg" alt="Pecan pie">
428
<li class="photo" data-tags="maple custard">
429
<a href="http://www.flickr.com/photos/wonko/5213920818/in/photostream/">
430
<img src="http://farm6.static.flickr.com/5245/5213920818_bf7cd599c3_m.jpg" alt="Maple custard pie">
434
<li class="photo" data-tags="pumpkin">
435
<a href="http://www.flickr.com/photos/wonko/5213912956/in/photostream/">
436
<img src="http://farm6.static.flickr.com/5049/5213912956_7cba11aa01_m.jpg" alt="Pumpkin pie">
440
<li class="photo" data-tags="turkey, pot pie, carrots, meat, savory">
441
<a href="http://www.flickr.com/photos/wonko/2055852065/in/photostream/">
442
<img src="http://farm3.static.flickr.com/2330/2055852065_d9a7d56650_m.jpg" alt="Turkey pot pie">
446
<li class="photo" data-tags="cherry, hearts, fruit">
447
<a href="http://www.flickr.com/photos/wonko/100174720/in/photostream/">
448
<img src="http://farm1.static.flickr.com/34/100174720_dad453636d_m.jpg" alt="Cherry pie with two hearts on top">
452
<li class="photo" data-tags="lattice, sour cherry, fruit">
453
<a href="http://www.flickr.com/photos/faerye/4839675135/in/photostream/">
454
<img src="http://farm5.static.flickr.com/4083/4839675135_fb5e88da3d_m.jpg" alt="Lattice-top sour cherry pie">
458
<li class="photo" data-tags="chocolate, cream, cinnamon, meringue, christmas, tree">
459
<a href="http://www.flickr.com/photos/faerye/4283875981/">
460
<img src="http://farm5.static.flickr.com/4029/4283875981_faaccb9089_m.jpg" alt="Chocolate cream pie with cinnamon meringue">
464
<li class="photo" data-tags="strawberry, chiffon, chocolate, wafer, fruit">
465
<a href="http://www.flickr.com/photos/faerye/4592482821/">
466
<img src="http://farm2.static.flickr.com/1070/4592482821_925ba97e60_m.jpg" alt="Strawberry chiffon pie with chocolate wafer crust">
470
<li class="photo" data-tags="key lime, whipped cream, graham cracker, slice, fruit">
471
<a href="http://www.flickr.com/photos/faerye/3492566166/">
472
<img src="http://farm4.static.flickr.com/3413/3492566166_0fd62e0d43_m.jpg" alt="Key lime pie with graham cracker crust">
476
<li class="photo" data-tags="lattice top, apple, fruit">
477
<a href="http://www.flickr.com/photos/faerye/3394679580/">
478
<img src="http://farm4.static.flickr.com/3569/3394679580_8b08c46fe6_m.jpg" alt="Lattice top apple pie">
485
YUI().use('autocomplete-base', 'autocomplete-filters', function (Y) {
486
// Create a custom PieFilter class that extends AutoCompleteBase.
487
var PieFilter = Y.Base.create('pieFilter', Y.Base, [Y.AutoCompleteBase], {
488
initializer: function () {
489
this._bindUIACBase();
490
this._syncUIACBase();
494
// Create and configure an instance of the PieFilter class.
495
filter = new PieFilter({
496
inputNode: '#ac-input',
500
// Run an immediately-invoked function that returns an array of results to
501
// be used for each query, based on the photos on the page. Since the list
502
// of photos remains static, this saves time by not gathering the results
503
// for each query.
505
// If the list of results were not static, we could simply set the source
506
// to the function itself rather than invoking the function immediately,
507
// and it would then run on every query.
508
source: (function () {
511
// Build an array of results containing each photo in the list.
512
Y.all('#photos > .photo').each(function (node) {
515
tags: node.getAttribute('data-tags')
520
}()), // <-- Note the parens. This invokes the function immediately.
521
// Remove these to invoke the function on every query instead.
523
// Specify that the "tags" property of each result object contains the text
524
// to filter on.
525
resultTextLocator: 'tags',
527
// Use a result filter to filter the photo results based on their tags.
528
resultFilters: 'phraseMatch'
531
// Subscribe to the "results" event and update photo visibility based on
532
// whether or not they were included in the list of results.
533
filter.on('results', function (e) {
534
// First hide all the photos.
535
Y.all('#photos > .photo').addClass('hidden');
537
// Then unhide the ones that are in the current result list.
538
Y.Array.each(e.results, function (result) {
539
result.raw.node.removeClass('hidden');
543
</script></pre>
549
<div class="yui3-u-1-4">
550
<div class="sidebar">
554
<div class="sidebox">
556
<h2 class="no-toc">Examples</h2>
560
<ul class="examples">
563
<li data-description="How to provide autocomplete suggestions from a local array.">
564
<a href="ac-local.html">Basic Local Data</a>
569
<li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
570
<a href="ac-jsonp.html">Remote Data via JSONP</a>
575
<li data-description="How to provide autocomplete suggestions using a YQL query source.">
576
<a href="ac-yql.html">Remote Data via YQL</a>
581
<li data-description="How to provide autocomplete suggestions using a DataSource instance.">
582
<a href="ac-datasource.html">Remote Data via DataSource</a>
587
<li data-description="How to implement delimited tag completion.">
588
<a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
593
<li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
594
<a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
599
<li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
600
<a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
615
<script src="../assets/vendor/prettify/prettify-min.js"></script>
616
<script>prettyPrint();</script>