← Back to branch summary

~ubuntu-branches/ubuntu/quantal/maas/quantal-proposed

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/autocomplete/ac-filter.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

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