~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/autocomplete/ac-filter.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
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>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Filter a Set of Existing Items on a Page</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><div class="intro">
23
 
<p>
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.
25
 
</p>
26
 
 
27
 
<p>
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".
29
 
</p>
30
 
</div>
31
 
 
32
 
<div class="example">
33
 
    <style scoped>
34
 
  #photos {
35
 
    border: 1px solid #cfcfcf;
36
 
    list-style: none;
37
 
    margin: 1.5em 0 0;
38
 
    padding: 6px;
39
 
  }
40
 
 
41
 
  #photos li {
42
 
    display: inline-block;
43
 
    list-style: none;
44
 
 
45
 
    /* fake inline-block for IE<8 */
46
 
    zoom: 1;
47
 
    *display: inline;
48
 
  }
49
 
 
50
 
  #photos .empty { font-style: italic; }
51
 
 
52
 
  #photos .photo {
53
 
    margin: 5px;
54
 
    text-align: center;
55
 
    width: 210px;
56
 
  }
57
 
 
58
 
  #photos .photo img {
59
 
    border: 1px solid #000;
60
 
    vertical-align: top;
61
 
    width: 210px;
62
 
  }
63
 
 
64
 
  #photos .hidden { display: none; }
65
 
</style>
66
 
 
67
 
<div id="demo" class="yui3-skin-sam">
68
 
  <label for="ac-input">Filter by:</label><br>
69
 
  <input id="ac-input" type="text">
70
 
 
71
 
  <ul id="photos">
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">
75
 
      </a>
76
 
    </li>
77
 
 
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">
81
 
      </a>
82
 
    </li>
83
 
 
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">
87
 
      </a>
88
 
    </li>
89
 
 
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">
93
 
      </a>
94
 
    </li>
95
 
 
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">
99
 
      </a>
100
 
    </li>
101
 
 
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">
105
 
      </a>
106
 
    </li>
107
 
 
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">
111
 
      </a>
112
 
    </li>
113
 
 
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">
117
 
      </a>
118
 
    </li>
119
 
 
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">
123
 
      </a>
124
 
    </li>
125
 
 
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">
129
 
      </a>
130
 
    </li>
131
 
 
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">
135
 
      </a>
136
 
    </li>
137
 
  </ul>
138
 
</div>
139
 
 
140
 
<script>
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();
147
 
    }
148
 
  }),
149
 
 
150
 
  // Create and configure an instance of the PieFilter class.
151
 
  filter = new PieFilter({
152
 
    inputNode: '#ac-input',
153
 
    minQueryLength: 0,
154
 
    queryDelay: 0,
155
 
 
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
159
 
    // for each query.
160
 
    //
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 () {
165
 
      var results = [];
166
 
 
167
 
      // Build an array of results containing each photo in the list.
168
 
      Y.all('#photos > .photo').each(function (node) {
169
 
        results.push({
170
 
          node: node,
171
 
          tags: node.getAttribute('data-tags')
172
 
        });
173
 
      });
174
 
 
175
 
      return results;
176
 
    }()), // <-- Note the parens. This invokes the function immediately.
177
 
          //     Remove these to invoke the function on every query instead.
178
 
 
179
 
    // Specify that the "tags" property of each result object contains the text
180
 
    // to filter on.
181
 
    resultTextLocator: 'tags',
182
 
 
183
 
    // Use a result filter to filter the photo results based on their tags.
184
 
    resultFilters: 'phraseMatch'
185
 
  });
186
 
 
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');
192
 
 
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');
196
 
    });
197
 
  });
198
 
});
199
 
</script>
200
 
 
201
 
</div>
202
 
 
203
 
<h2>HTML</h2>
204
 
 
205
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
206
 
  &lt;label for=&quot;ac-input&quot;&gt;Filter by:&lt;&#x2F;label&gt;&lt;br&gt;
207
 
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
208
 
 
209
 
  &lt;ul id=&quot;photos&quot;&gt;
210
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;apple, fruit&quot;&gt;
211
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213328415&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
212
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5002&#x2F;5213328415_4cf3aa583f_m.jpg&quot; alt=&quot;Apple pie&quot;&gt;
213
 
      &lt;&#x2F;a&gt;
214
 
    &lt;&#x2F;li&gt;
215
 
 
216
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;pecan&quot;&gt;
217
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213327801&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
218
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5208&#x2F;5213327801_1e62145da1_m.jpg&quot; alt=&quot;Pecan pie&quot;&gt;
219
 
      &lt;&#x2F;a&gt;
220
 
    &lt;&#x2F;li&gt;
221
 
 
222
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;maple custard&quot;&gt;
223
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213920818&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
224
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5245&#x2F;5213920818_bf7cd599c3_m.jpg&quot; alt=&quot;Maple custard pie&quot;&gt;
225
 
      &lt;&#x2F;a&gt;
226
 
    &lt;&#x2F;li&gt;
227
 
 
228
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;pumpkin&quot;&gt;
229
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213912956&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
230
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5049&#x2F;5213912956_7cba11aa01_m.jpg&quot; alt=&quot;Pumpkin pie&quot;&gt;
231
 
      &lt;&#x2F;a&gt;
232
 
    &lt;&#x2F;li&gt;
233
 
 
234
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;turkey, pot pie, carrots, meat, savory&quot;&gt;
235
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;2055852065&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
236
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm3.static.flickr.com&#x2F;2330&#x2F;2055852065_d9a7d56650_m.jpg&quot; alt=&quot;Turkey pot pie&quot;&gt;
237
 
      &lt;&#x2F;a&gt;
238
 
    &lt;&#x2F;li&gt;
239
 
 
240
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;cherry, hearts, fruit&quot;&gt;
241
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;100174720&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
242
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm1.static.flickr.com&#x2F;34&#x2F;100174720_dad453636d_m.jpg&quot; alt=&quot;Cherry pie with two hearts on top&quot;&gt;
243
 
      &lt;&#x2F;a&gt;
244
 
    &lt;&#x2F;li&gt;
245
 
 
246
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;lattice, sour cherry, fruit&quot;&gt;
247
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;4839675135&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
248
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4083&#x2F;4839675135_fb5e88da3d_m.jpg&quot; alt=&quot;Lattice-top sour cherry pie&quot;&gt;
249
 
      &lt;&#x2F;a&gt;
250
 
    &lt;&#x2F;li&gt;
251
 
 
252
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;chocolate, cream, cinnamon, meringue, christmas, tree&quot;&gt;
253
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;4283875981&#x2F;&quot;&gt;
254
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4029&#x2F;4283875981_faaccb9089_m.jpg&quot; alt=&quot;Chocolate cream pie with cinnamon meringue&quot;&gt;
255
 
      &lt;&#x2F;a&gt;
256
 
    &lt;&#x2F;li&gt;
257
 
 
258
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;strawberry, chiffon, chocolate, wafer, fruit&quot;&gt;
259
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;4592482821&#x2F;&quot;&gt;
260
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm2.static.flickr.com&#x2F;1070&#x2F;4592482821_925ba97e60_m.jpg&quot; alt=&quot;Strawberry chiffon pie with chocolate wafer crust&quot;&gt;
261
 
      &lt;&#x2F;a&gt;
262
 
    &lt;&#x2F;li&gt;
263
 
 
264
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;key lime, whipped cream, graham cracker, slice, fruit&quot;&gt;
265
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;3492566166&#x2F;&quot;&gt;
266
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm4.static.flickr.com&#x2F;3413&#x2F;3492566166_0fd62e0d43_m.jpg&quot; alt=&quot;Key lime pie with graham cracker crust&quot;&gt;
267
 
      &lt;&#x2F;a&gt;
268
 
    &lt;&#x2F;li&gt;
269
 
 
270
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;lattice top, apple, fruit&quot;&gt;
271
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;3394679580&#x2F;&quot;&gt;
272
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm4.static.flickr.com&#x2F;3569&#x2F;3394679580_8b08c46fe6_m.jpg&quot; alt=&quot;Lattice top apple pie&quot;&gt;
273
 
      &lt;&#x2F;a&gt;
274
 
    &lt;&#x2F;li&gt;
275
 
  &lt;&#x2F;ul&gt;
276
 
&lt;&#x2F;div&gt;</pre>
277
 
 
278
 
 
279
 
<h2>CSS</h2>
280
 
 
281
 
<pre class="code prettyprint lang-css">#photos {
282
 
  border: 1px solid #cfcfcf;
283
 
  list-style: none;
284
 
  margin: 1.5em 0 0;
285
 
  padding: 6px;
286
 
}
287
 
 
288
 
#photos li {
289
 
  display: inline-block;
290
 
  list-style: none;
291
 
 
292
 
  &#x2F;* fake inline-block for IE&lt;8 *&#x2F;
293
 
  zoom: 1;
294
 
  *display: inline;
295
 
}
296
 
 
297
 
#photos .empty { font-style: italic; }
298
 
 
299
 
#photos .photo {
300
 
  margin: 5px;
301
 
  text-align: center;
302
 
  width: 240px;
303
 
}
304
 
 
305
 
#photos .photo img {
306
 
  border: 1px solid #000;
307
 
  vertical-align: top;
308
 
}
309
 
 
310
 
#photos .hidden { display: none; }</pre>
311
 
 
312
 
 
313
 
<h2>JavaScript</h2>
314
 
 
315
 
<pre class="code prettyprint">YUI().use(&#x27;autocomplete-base&#x27;, &#x27;autocomplete-filters&#x27;, function (Y) {
316
 
  &#x2F;&#x2F; Create a custom PieFilter class that extends AutoCompleteBase.
317
 
  var PieFilter = Y.Base.create(&#x27;pieFilter&#x27;, Y.Base, [Y.AutoCompleteBase], {
318
 
    initializer: function () {
319
 
      this._bindUIACBase();
320
 
      this._syncUIACBase();
321
 
    }
322
 
  }),
323
 
 
324
 
  &#x2F;&#x2F; Create and configure an instance of the PieFilter class.
325
 
  filter = new PieFilter({
326
 
    inputNode: &#x27;#ac-input&#x27;,
327
 
    minQueryLength: 0,
328
 
    queryDelay: 0,
329
 
 
330
 
    &#x2F;&#x2F; Run an immediately-invoked function that returns an array of results to
331
 
    &#x2F;&#x2F; be used for each query, based on the photos on the page. Since the list
332
 
    &#x2F;&#x2F; of photos remains static, this saves time by not gathering the results
333
 
    &#x2F;&#x2F; for each query.
334
 
    &#x2F;&#x2F;
335
 
    &#x2F;&#x2F; If the list of results were not static, we could simply set the source
336
 
    &#x2F;&#x2F; to the function itself rather than invoking the function immediately,
337
 
    &#x2F;&#x2F; and it would then run on every query.
338
 
    source: (function () {
339
 
      var results = [];
340
 
 
341
 
      &#x2F;&#x2F; Build an array of results containing each photo in the list.
342
 
      Y.all(&#x27;#photos &gt; .photo&#x27;).each(function (node) {
343
 
        results.push({
344
 
          node: node,
345
 
          tags: node.getAttribute(&#x27;data-tags&#x27;)
346
 
        });
347
 
      });
348
 
 
349
 
      return results;
350
 
    }()), &#x2F;&#x2F; &lt;-- Note the parens. This invokes the function immediately.
351
 
          &#x2F;&#x2F;     Remove these to invoke the function on every query instead.
352
 
 
353
 
    &#x2F;&#x2F; Specify that the &quot;tags&quot; property of each result object contains the text
354
 
    &#x2F;&#x2F; to filter on.
355
 
    resultTextLocator: &#x27;tags&#x27;,
356
 
 
357
 
    &#x2F;&#x2F; Use a result filter to filter the photo results based on their tags.
358
 
    resultFilters: &#x27;phraseMatch&#x27;
359
 
  });
360
 
 
361
 
  &#x2F;&#x2F; Subscribe to the &quot;results&quot; event and update photo visibility based on
362
 
  &#x2F;&#x2F; whether or not they were included in the list of results.
363
 
  filter.on(&#x27;results&#x27;, function (e) {
364
 
    &#x2F;&#x2F; First hide all the photos.
365
 
    Y.all(&#x27;#photos &gt; .photo&#x27;).addClass(&#x27;hidden&#x27;);
366
 
 
367
 
    &#x2F;&#x2F; Then unhide the ones that are in the current result list.
368
 
    Y.Array.each(e.results, function (result) {
369
 
      result.raw.node.removeClass(&#x27;hidden&#x27;);
370
 
    });
371
 
  });
372
 
});</pre>
373
 
 
374
 
 
375
 
<h2>Complete Example Source</h2>
376
 
 
377
 
<pre class="code prettyprint">&lt;style scoped&gt;
378
 
  #photos {
379
 
    border: 1px solid #cfcfcf;
380
 
    list-style: none;
381
 
    margin: 1.5em 0 0;
382
 
    padding: 6px;
383
 
  }
384
 
 
385
 
  #photos li {
386
 
    display: inline-block;
387
 
    list-style: none;
388
 
 
389
 
    &#x2F;* fake inline-block for IE&lt;8 *&#x2F;
390
 
    zoom: 1;
391
 
    *display: inline;
392
 
  }
393
 
 
394
 
  #photos .empty { font-style: italic; }
395
 
 
396
 
  #photos .photo {
397
 
    margin: 5px;
398
 
    text-align: center;
399
 
    width: 210px;
400
 
  }
401
 
 
402
 
  #photos .photo img {
403
 
    border: 1px solid #000;
404
 
    vertical-align: top;
405
 
    width: 210px;
406
 
  }
407
 
 
408
 
  #photos .hidden { display: none; }
409
 
&lt;&#x2F;style&gt;
410
 
 
411
 
&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
412
 
  &lt;label for=&quot;ac-input&quot;&gt;Filter by:&lt;&#x2F;label&gt;&lt;br&gt;
413
 
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
414
 
 
415
 
  &lt;ul id=&quot;photos&quot;&gt;
416
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;apple, fruit&quot;&gt;
417
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213328415&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
418
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5002&#x2F;5213328415_4cf3aa583f_m.jpg&quot; alt=&quot;Apple pie&quot;&gt;
419
 
      &lt;&#x2F;a&gt;
420
 
    &lt;&#x2F;li&gt;
421
 
 
422
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;pecan&quot;&gt;
423
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213327801&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
424
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5208&#x2F;5213327801_1e62145da1_m.jpg&quot; alt=&quot;Pecan pie&quot;&gt;
425
 
      &lt;&#x2F;a&gt;
426
 
    &lt;&#x2F;li&gt;
427
 
 
428
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;maple custard&quot;&gt;
429
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213920818&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
430
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5245&#x2F;5213920818_bf7cd599c3_m.jpg&quot; alt=&quot;Maple custard pie&quot;&gt;
431
 
      &lt;&#x2F;a&gt;
432
 
    &lt;&#x2F;li&gt;
433
 
 
434
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;pumpkin&quot;&gt;
435
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;5213912956&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
436
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm6.static.flickr.com&#x2F;5049&#x2F;5213912956_7cba11aa01_m.jpg&quot; alt=&quot;Pumpkin pie&quot;&gt;
437
 
      &lt;&#x2F;a&gt;
438
 
    &lt;&#x2F;li&gt;
439
 
 
440
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;turkey, pot pie, carrots, meat, savory&quot;&gt;
441
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;2055852065&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
442
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm3.static.flickr.com&#x2F;2330&#x2F;2055852065_d9a7d56650_m.jpg&quot; alt=&quot;Turkey pot pie&quot;&gt;
443
 
      &lt;&#x2F;a&gt;
444
 
    &lt;&#x2F;li&gt;
445
 
 
446
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;cherry, hearts, fruit&quot;&gt;
447
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;wonko&#x2F;100174720&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
448
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm1.static.flickr.com&#x2F;34&#x2F;100174720_dad453636d_m.jpg&quot; alt=&quot;Cherry pie with two hearts on top&quot;&gt;
449
 
      &lt;&#x2F;a&gt;
450
 
    &lt;&#x2F;li&gt;
451
 
 
452
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;lattice, sour cherry, fruit&quot;&gt;
453
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;4839675135&#x2F;in&#x2F;photostream&#x2F;&quot;&gt;
454
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4083&#x2F;4839675135_fb5e88da3d_m.jpg&quot; alt=&quot;Lattice-top sour cherry pie&quot;&gt;
455
 
      &lt;&#x2F;a&gt;
456
 
    &lt;&#x2F;li&gt;
457
 
 
458
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;chocolate, cream, cinnamon, meringue, christmas, tree&quot;&gt;
459
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;4283875981&#x2F;&quot;&gt;
460
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm5.static.flickr.com&#x2F;4029&#x2F;4283875981_faaccb9089_m.jpg&quot; alt=&quot;Chocolate cream pie with cinnamon meringue&quot;&gt;
461
 
      &lt;&#x2F;a&gt;
462
 
    &lt;&#x2F;li&gt;
463
 
 
464
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;strawberry, chiffon, chocolate, wafer, fruit&quot;&gt;
465
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;4592482821&#x2F;&quot;&gt;
466
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm2.static.flickr.com&#x2F;1070&#x2F;4592482821_925ba97e60_m.jpg&quot; alt=&quot;Strawberry chiffon pie with chocolate wafer crust&quot;&gt;
467
 
      &lt;&#x2F;a&gt;
468
 
    &lt;&#x2F;li&gt;
469
 
 
470
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;key lime, whipped cream, graham cracker, slice, fruit&quot;&gt;
471
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;3492566166&#x2F;&quot;&gt;
472
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm4.static.flickr.com&#x2F;3413&#x2F;3492566166_0fd62e0d43_m.jpg&quot; alt=&quot;Key lime pie with graham cracker crust&quot;&gt;
473
 
      &lt;&#x2F;a&gt;
474
 
    &lt;&#x2F;li&gt;
475
 
 
476
 
    &lt;li class=&quot;photo&quot; data-tags=&quot;lattice top, apple, fruit&quot;&gt;
477
 
      &lt;a href=&quot;http:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;faerye&#x2F;3394679580&#x2F;&quot;&gt;
478
 
        &lt;img src=&quot;http:&#x2F;&#x2F;farm4.static.flickr.com&#x2F;3569&#x2F;3394679580_8b08c46fe6_m.jpg&quot; alt=&quot;Lattice top apple pie&quot;&gt;
479
 
      &lt;&#x2F;a&gt;
480
 
    &lt;&#x2F;li&gt;
481
 
  &lt;&#x2F;ul&gt;
482
 
&lt;&#x2F;div&gt;
483
 
 
484
 
&lt;script&gt;
485
 
YUI().use(&#x27;autocomplete-base&#x27;, &#x27;autocomplete-filters&#x27;, function (Y) {
486
 
  &#x2F;&#x2F; Create a custom PieFilter class that extends AutoCompleteBase.
487
 
  var PieFilter = Y.Base.create(&#x27;pieFilter&#x27;, Y.Base, [Y.AutoCompleteBase], {
488
 
    initializer: function () {
489
 
      this._bindUIACBase();
490
 
      this._syncUIACBase();
491
 
    }
492
 
  }),
493
 
 
494
 
  &#x2F;&#x2F; Create and configure an instance of the PieFilter class.
495
 
  filter = new PieFilter({
496
 
    inputNode: &#x27;#ac-input&#x27;,
497
 
    minQueryLength: 0,
498
 
    queryDelay: 0,
499
 
 
500
 
    &#x2F;&#x2F; Run an immediately-invoked function that returns an array of results to
501
 
    &#x2F;&#x2F; be used for each query, based on the photos on the page. Since the list
502
 
    &#x2F;&#x2F; of photos remains static, this saves time by not gathering the results
503
 
    &#x2F;&#x2F; for each query.
504
 
    &#x2F;&#x2F;
505
 
    &#x2F;&#x2F; If the list of results were not static, we could simply set the source
506
 
    &#x2F;&#x2F; to the function itself rather than invoking the function immediately,
507
 
    &#x2F;&#x2F; and it would then run on every query.
508
 
    source: (function () {
509
 
      var results = [];
510
 
 
511
 
      &#x2F;&#x2F; Build an array of results containing each photo in the list.
512
 
      Y.all(&#x27;#photos &gt; .photo&#x27;).each(function (node) {
513
 
        results.push({
514
 
          node: node,
515
 
          tags: node.getAttribute(&#x27;data-tags&#x27;)
516
 
        });
517
 
      });
518
 
 
519
 
      return results;
520
 
    }()), &#x2F;&#x2F; &lt;-- Note the parens. This invokes the function immediately.
521
 
          &#x2F;&#x2F;     Remove these to invoke the function on every query instead.
522
 
 
523
 
    &#x2F;&#x2F; Specify that the &quot;tags&quot; property of each result object contains the text
524
 
    &#x2F;&#x2F; to filter on.
525
 
    resultTextLocator: &#x27;tags&#x27;,
526
 
 
527
 
    &#x2F;&#x2F; Use a result filter to filter the photo results based on their tags.
528
 
    resultFilters: &#x27;phraseMatch&#x27;
529
 
  });
530
 
 
531
 
  &#x2F;&#x2F; Subscribe to the &quot;results&quot; event and update photo visibility based on
532
 
  &#x2F;&#x2F; whether or not they were included in the list of results.
533
 
  filter.on(&#x27;results&#x27;, function (e) {
534
 
    &#x2F;&#x2F; First hide all the photos.
535
 
    Y.all(&#x27;#photos &gt; .photo&#x27;).addClass(&#x27;hidden&#x27;);
536
 
 
537
 
    &#x2F;&#x2F; Then unhide the ones that are in the current result list.
538
 
    Y.Array.each(e.results, function (result) {
539
 
      result.raw.node.removeClass(&#x27;hidden&#x27;);
540
 
    });
541
 
  });
542
 
});
543
 
&lt;&#x2F;script&gt;</pre>
544
 
 
545
 
</div>
546
 
            </div>
547
 
        </div>
548
 
 
549
 
        <div class="yui3-u-1-4">
550
 
            <div class="sidebar">
551
 
                
552
 
 
553
 
                
554
 
                    <div class="sidebox">
555
 
                        <div class="hd">
556
 
                            <h2 class="no-toc">Examples</h2>
557
 
                        </div>
558
 
 
559
 
                        <div class="bd">
560
 
                            <ul class="examples">
561
 
                                
562
 
                                    
563
 
                                        <li data-description="How to provide autocomplete suggestions from a local array.">
564
 
                                            <a href="ac-local.html">Basic Local Data</a>
565
 
                                        </li>
566
 
                                    
567
 
                                
568
 
                                    
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>
571
 
                                        </li>
572
 
                                    
573
 
                                
574
 
                                    
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>
577
 
                                        </li>
578
 
                                    
579
 
                                
580
 
                                    
581
 
                                        <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
582
 
                                            <a href="ac-datasource.html">Remote Data via DataSource</a>
583
 
                                        </li>
584
 
                                    
585
 
                                
586
 
                                    
587
 
                                        <li data-description="How to implement delimited tag completion.">
588
 
                                            <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
589
 
                                        </li>
590
 
                                    
591
 
                                
592
 
                                    
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>
595
 
                                        </li>
596
 
                                    
597
 
                                
598
 
                                    
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>
601
 
                                        </li>
602
 
                                    
603
 
                                
604
 
                            </ul>
605
 
                        </div>
606
 
                    </div>
607
 
                
608
 
 
609
 
                
610
 
            </div>
611
 
        </div>
612
 
    </div>
613
 
</div>
614
 
 
615
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
616
 
<script>prettyPrint();</script>
617
 
 
618
 
</body>
619
 
</html>