|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>AutoComplete</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>AutoComplete</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<p> |
|
|
32 |
<img src="../assets/autocomplete/img/autocomplete-01.png" alt="Screenshot of the AutoComplete list widget" style="border: 1px solid #bfbfbf; float:right; height:161px; margin: 0 0 8px 8px; width:272px;"> |
|
|
33 |
The AutoComplete widget provides a flexible, configurable, and accessible implementation of the <a href="http://developer.yahoo.com/ypatterns/selection/autocomplete.html">AutoComplete design pattern</a>, which offers suggestions or provides some other form of filtering or completion as a user types text in an input field. |
|
|
34 |
</p> |
|
|
35 |
|
|
|
36 |
<p> |
|
|
37 |
In addition to the core logic for filtering and completion, AutoComplete also provides options for custom filtering, highlighting, and formatting of results; delimited queries; result retrieval from a variety of local and remote sources including <a href="http://developer.yahoo.com/yql/">YQL</a>, JSONP, and XHR; and more. |
|
|
38 |
</p> |
|
|
39 |
|
|
|
40 |
<p> |
|
|
41 |
AutoComplete is also built to be modular and easy to extend so that it can be used as the basis for custom implementations and widgets. |
|
|
42 |
</p> |
|
|
43 |
</div> |
|
|
44 |
|
|
|
45 |
<h2 id="getting-started">Getting Started</h2> |
|
|
46 |
|
|
|
47 |
<p> |
|
|
48 |
To include the source files for AutoComplete and its dependencies, first load |
|
|
49 |
the YUI seed file if you haven't already loaded it. |
|
|
50 |
</p> |
|
|
51 |
|
|
|
52 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
53 |
|
|
|
54 |
|
|
|
55 |
<p> |
|
|
56 |
Next, create a new YUI instance for your application and populate it with the |
|
|
57 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
58 |
YUI will automatically load any dependencies required by the modules you |
|
|
59 |
specify. |
|
|
60 |
</p> |
|
|
61 |
|
|
|
62 |
<pre class="code prettyprint"><script> |
|
|
63 |
// Create a new YUI instance and populate it with the required modules. |
|
|
64 |
YUI().use('autocomplete', function (Y) { |
|
|
65 |
// AutoComplete is available and ready for use. Add implementation |
|
|
66 |
// code here. |
|
|
67 |
}); |
|
|
68 |
</script></pre> |
|
|
69 |
|
|
|
70 |
|
|
|
71 |
<p> |
|
|
72 |
For more information on creating YUI instances and on the |
|
|
73 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
74 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
75 |
</p> |
|
|
76 |
|
|
|
77 |
|
|
|
78 |
<h2 id="using-autocomplete">Using AutoComplete</h2> |
|
|
79 |
<h3 id="quick-start">Quick Start</h3> |
|
|
80 |
|
|
|
81 |
<p> |
|
|
82 |
In a hurry? Here's how to get up and running with AutoComplete in just a few lines of code. The following examples demonstrate how to use AutoComplete with several common result sources. Pick the one that most closely matches your needs (you only need one!). |
|
|
83 |
</p> |
|
|
84 |
|
|
|
85 |
<pre class="code prettyprint">YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) { |
|
|
86 |
|
|
|
87 |
// Add the yui3-skin-sam class to the body so the default |
|
|
88 |
// AutoComplete widget skin will be applied. |
|
|
89 |
Y.one('body').addClass('yui3-skin-sam'); |
|
|
90 |
|
|
|
91 |
// The following examples demonstrate some of the different |
|
|
92 |
// result sources AutoComplete supports. You only need to |
|
|
93 |
// pick one, you don't need them all. Assume the '#ac-input' |
|
|
94 |
// element id used in this example refers to an <input> |
|
|
95 |
// element on the page. |
|
|
96 |
|
|
|
97 |
// Array source. Replace the example array with any array. |
|
|
98 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
99 |
resultHighlighter: 'phraseMatch', |
|
|
100 |
source: ['foo', 'bar', 'baz'] |
|
|
101 |
}); |
|
|
102 |
|
|
|
103 |
// YQL source. Leave the {query} placeholder as is; AutoComplete |
|
|
104 |
// will replace it automatically. |
|
|
105 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
106 |
resultHighlighter: 'phraseMatch', |
|
|
107 |
source: 'select * from search.suggest where query="{query}"' |
|
|
108 |
}); |
|
|
109 |
|
|
|
110 |
// JSONP URL source. Leave the {query} and {callback} placeholders |
|
|
111 |
// as is; AutoComplete will replace them automatically. |
|
|
112 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
113 |
resultHighlighter: 'phraseMatch', |
|
|
114 |
source: 'http://example.com/search.jsonp?q={query}&callback={callback}' |
|
|
115 |
}); |
|
|
116 |
|
|
|
117 |
// XHR URL source (no callback). Leave the {query} placeholder |
|
|
118 |
// as is; AutoComplete will replace it automatically. |
|
|
119 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
120 |
resultHighlighter: 'phraseMatch', |
|
|
121 |
source: 'http://example.com/search.json?q={query}' |
|
|
122 |
}); |
|
|
123 |
|
|
|
124 |
});</pre> |
|
|
125 |
|
|
|
126 |
|
|
|
127 |
<p> |
|
|
128 |
In most cases, one of these examples should be enough to get you started. For a more complete discussion of how to use, configure, and customize AutoComplete, read on. |
|
|
129 |
</p> |
|
|
130 |
|
|
|
131 |
<h3 id="instantiating-autocomplete">Instantiating AutoComplete</h3> |
|
|
132 |
|
|
|
133 |
<p> |
|
|
134 |
There are two ways to instantiate an AutoComplete widget: you can plug <code>Y.Plugin.AutoComplete</code> into an existing <code>Y.Node</code> instance, or you can create a new standalone instance of the <code>Y.AutoComplete</code> class. |
|
|
135 |
</p> |
|
|
136 |
|
|
|
137 |
<p> |
|
|
138 |
Both instantiation methods provide the same AutoComplete functionality, so feel |
|
|
139 |
free to use whichever one you prefer. Throughout this guide and in the examples, |
|
|
140 |
the plugin method is used most, but the class method will work equally well in all cases. |
|
|
141 |
</p> |
|
|
142 |
|
|
|
143 |
<p> |
|
|
144 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
145 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
146 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
147 |
</p> |
|
|
148 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
|
149 |
|
|
|
150 |
|
|
|
151 |
<p> |
|
|
152 |
See the <a href="#skinning">Skinning</a> section below for more info. |
|
|
153 |
</p> |
|
|
154 |
|
|
|
155 |
<h4 id="as-a-plugin">As a Plugin</h4> |
|
|
156 |
|
|
|
157 |
<p> |
|
|
158 |
To instantiate AutoComplete as a plugin, use the <code>plug()</code> method to attach it to an existing <code>Y.Node</code> instance. The node must be an <code><input></code> or <code><textarea></code> element. You may also provide a configuration object containing AutoComplete config attributes, but this isn't required. |
|
|
159 |
</p> |
|
|
160 |
|
|
|
161 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete);</pre> |
|
|
162 |
|
|
|
163 |
|
|
|
164 |
<p> |
|
|
165 |
In most cases, you'll at least want to specify a <code>source</code> attribute, which tells AutoComplete where to get results. The simplest type of source is an array of strings. |
|
|
166 |
</p> |
|
|
167 |
|
|
|
168 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
169 |
source: ['friends', 'Romans', 'countrymen'] |
|
|
170 |
});</pre> |
|
|
171 |
|
|
|
172 |
|
|
|
173 |
<p> |
|
|
174 |
Once you've plugged AutoComplete into a node, you can access the AutoComplete instance through the node's <code>ac</code> property. |
|
|
175 |
</p> |
|
|
176 |
|
|
|
177 |
<pre class="code prettyprint">var inputNode = Y.one('#ac-input'); |
|
|
178 |
|
|
|
179 |
inputNode.plug(Y.Plugin.AutoComplete); |
|
|
180 |
inputNode.ac.set('source', ['friends', 'Romans', 'countrymen']);</pre> |
|
|
181 |
|
|
|
182 |
|
|
|
183 |
<p> |
|
|
184 |
When using AutoComplete as a plugin, the AutoComplete widget markup will be rendered automatically as soon as it's plugged into a node instance. If you'd like to defer rendering until a time of your choosing, set the <code>render</code> config attribute to <code>false</code>. |
|
|
185 |
</p> |
|
|
186 |
|
|
|
187 |
<pre class="code prettyprint">// Don't render immediately. |
|
|
188 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {render: false}); |
|
|
189 |
|
|
|
190 |
// Render only when I say so. |
|
|
191 |
Y.one('#ac-input').ac.render();</pre> |
|
|
192 |
|
|
|
193 |
|
|
|
194 |
<p> |
|
|
195 |
By default, the AutoComplete widget markup is appended to the parent node of the node it's plugged into. If you would rather render the markup inside a different parent, pass a CSS selector or <code>Y.Node</code> instance to the <code>render</code> config attribute or the <code>render()</code> method. |
|
|
196 |
</p> |
|
|
197 |
|
|
|
198 |
<pre class="code prettyprint">// Render inside the #ac-parent node. |
|
|
199 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {render: '#ac-parent'});</pre> |
|
|
200 |
|
|
|
201 |
|
|
|
202 |
<p> |
|
|
203 |
For more on available configuration attributes, see the <a href="#configuring-autocomplete">Configuring AutoComplete</a> section below. For more on the different result sources AutoComplete supports, see <a href="#result-sources">Result Sources</a>. |
|
|
204 |
</p> |
|
|
205 |
|
|
|
206 |
<h4 id="as-a-class">As a Class</h4> |
|
|
207 |
|
|
|
208 |
<p> |
|
|
209 |
To instantiate AutoComplete as a class, create a new instance of <code>Y.AutoComplete</code> and specify an <code>inputNode</code> config value. The <code>inputNode</code> must be a CSS selector, <code>Y.Node</code> instance, or DOM element referencing an <code><input></code> or <code><textarea></code> element that already exists on the page. |
|
|
210 |
</p> |
|
|
211 |
|
|
|
212 |
<pre class="code prettyprint">var ac = new Y.AutoComplete({inputNode: '#ac-input'});</pre> |
|
|
213 |
|
|
|
214 |
|
|
|
215 |
<p> |
|
|
216 |
<code>inputNode</code> is the only required configuration attribute, but in most cases you'll also want to specify a <code>source</code> attribute, which tells AutoComplete where to get results. The simplest type of source is an array of strings. |
|
|
217 |
</p> |
|
|
218 |
|
|
|
219 |
<pre class="code prettyprint">var ac = new Y.AutoComplete({ |
|
|
220 |
inputNode: '#ac-input', |
|
|
221 |
source : ['friends', 'Romans', 'countrymen'] |
|
|
222 |
});</pre> |
|
|
223 |
|
|
|
224 |
|
|
|
225 |
<p> |
|
|
226 |
When instantiated as a class, the AutoComplete widget markup is not rendered automatically. To render it, either set the <code>render</code> config attribute to <code>true</code> at instantiation time or call the AutoComplete instance's <code>render()</code> method later. |
|
|
227 |
</p> |
|
|
228 |
|
|
|
229 |
<pre class="code prettyprint">// Render immediately. |
|
|
230 |
var ac = new Y.AutoComplete({ |
|
|
231 |
inputNode: '#ac-input', |
|
|
232 |
render : true |
|
|
233 |
}); |
|
|
234 |
|
|
|
235 |
// Don't render immediately. |
|
|
236 |
var ac = new Y.AutoComplete({inputNode: '#ac-input'}); |
|
|
237 |
|
|
|
238 |
// Render only when I say so. |
|
|
239 |
ac.render();</pre> |
|
|
240 |
|
|
|
241 |
|
|
|
242 |
<p> |
|
|
243 |
By default, the AutoComplete widget markup is appended to the parent node of the <code>inputNode</code> when the widget is rendered. If you would rather render the markup inside a different parent, pass a CSS selector or <code>Y.Node</code> instance to the <code>render</code> config attribute or the <code>render()</code> method. |
|
|
244 |
</p> |
|
|
245 |
|
|
|
246 |
<pre class="code prettyprint">// Render inside the #ac-parent node. |
|
|
247 |
var ac = new Y.AutoComplete({inputNode: '#ac-input'}); |
|
|
248 |
ac.render('#ac-parent');</pre> |
|
|
249 |
|
|
|
250 |
|
|
|
251 |
<p> |
|
|
252 |
For more on available configuration attributes, see the <a href="#configuring-autocomplete">Configuring AutoComplete</a> section below. For more on the different result sources AutoComplete supports, see <a href="#result-sources">Result sources</a>. |
|
|
253 |
</p> |
|
|
254 |
|
|
|
255 |
<h3 id="dom-structure">DOM Structure</h3> |
|
|
256 |
|
|
|
257 |
<p> |
|
|
258 |
When the AutoComplete widget is rendered, it will add the CSS class <code>yui3-aclist-input</code> to the specified <code>inputNode</code>, along with several ARIA attributes. |
|
|
259 |
</p> |
|
|
260 |
|
|
|
261 |
<pre class="code prettyprint"><!-- Before AutoComplete is rendered --> |
|
|
262 |
<input id="ac-input" type="text"> |
|
|
263 |
|
|
|
264 |
<!-- After AutoComplete is rendered --> |
|
|
265 |
<input id="ac-input" type="text" class="yui3-aclist-input" |
|
|
266 |
aria-autocomplete="list" aria-expanded="false" |
|
|
267 |
aria-owns="yui_3_3_0_1_129140941365181" autocomplete="off"></pre> |
|
|
268 |
|
|
|
269 |
|
|
|
270 |
<p> |
|
|
271 |
AutoComplete will also add markup for the list widget. By default, the list markup will be appended to the parent node that contains the <code>inputNode</code>. |
|
|
272 |
</p> |
|
|
273 |
|
|
|
274 |
<pre class="code prettyprint"><!-- AutoCompleteList widget markup with sample results --> |
|
|
275 |
<div id="yui_3_3_0_1_129140941365147" |
|
|
276 |
class="yui3-widget yui3-aclist yui3-widget-positioned yui3-aclist-hidden" |
|
|
277 |
style="position: absolute; width: 254px; left: 13px; top: 32px;" |
|
|
278 |
aria-hidden="true"> |
|
|
279 |
|
|
|
280 |
<div id="yui_3_3_0_1_129140941365150" class="yui3-aclist-content"> |
|
|
281 |
<ul class="yui3-aclist-list" id="yui_3_3_0_1_129140941365181" role="listbox"> |
|
|
282 |
<li class="yui3-aclist-item" id="yui_3_3_0_1_1291409413651452" role="option">friends</li> |
|
|
283 |
<li class="yui3-aclist-item" id="yui_3_3_0_1_1291409413651454" role="option">Romans</li> |
|
|
284 |
<li class="yui3-aclist-item" id="yui_3_3_0_1_1291409413651456" role="option">countrymen</li> |
|
|
285 |
</ul> |
|
|
286 |
</div> |
|
|
287 |
|
|
|
288 |
</div></pre> |
|
|
289 |
|
|
|
290 |
|
|
|
291 |
<p> |
|
|
292 |
For information on skinning the AutoComplete widget, see the <a href="#skinning">Skinning</a> section below. |
|
|
293 |
</p> |
|
|
294 |
|
|
|
295 |
<h3 id="configuring-autocomplete">Configuring AutoComplete</h3> |
|
|
296 |
|
|
|
297 |
<p> |
|
|
298 |
Except for <code>inputNode</code>, all configuration attributes are optional. These lists only contain the most interesting attributes. For a complete list of all attributes, please refer to the <a href="http://yuilibrary.com/yui/docs/api/modules/autocomplete.html">API docs</a>. |
|
|
299 |
</p> |
|
|
300 |
|
|
|
301 |
<h4 id="base-config-attributes">Base Config Attributes</h4> |
|
|
302 |
|
|
|
303 |
<p> |
|
|
304 |
These attributes are provided by <code>AutoCompleteBase</code>, which is the core foundation for the AutoComplete widget. They are available on all AutoComplete instances. |
|
|
305 |
</p> |
|
|
306 |
|
|
|
307 |
<table> |
|
|
308 |
<thead> |
|
|
309 |
<tr> |
|
|
310 |
<th>Attribute</th> |
|
|
311 |
<th>Default</th> |
|
|
312 |
<th>Description</th> |
|
|
313 |
</tr> |
|
|
314 |
</thead> |
|
|
315 |
<tbody> |
|
|
316 |
<tr> |
|
|
317 |
<td><code>allowBrowserAutocomplete</code></td> |
|
|
318 |
<td><code>false</code></td> |
|
|
319 |
<td> |
|
|
320 |
Whether or not to enable the browser's built-in autocomplete functionality for input fields. |
|
|
321 |
</td> |
|
|
322 |
</tr> |
|
|
323 |
|
|
|
324 |
<tr> |
|
|
325 |
<td><code>enableCache</code></td> |
|
|
326 |
<td><code>true</code></td> |
|
|
327 |
<td> |
|
|
328 |
Whether or not to enable in-memory caching in result sources that support it. This can significantly improve performance for result sources that make remote requests (like JSONP, YQL, and XHR), so it's best to leave this enabled unless you have a good reason to disable it. |
|
|
329 |
</td> |
|
|
330 |
</tr> |
|
|
331 |
|
|
|
332 |
<tr> |
|
|
333 |
<td><code>inputNode</code></td> |
|
|
334 |
<td><em>none</em></td> |
|
|
335 |
<td> |
|
|
336 |
<strong>Required</strong>. <code><input></code> or <code><textarea></code> node to monitor for changes. |
|
|
337 |
</td> |
|
|
338 |
</tr> |
|
|
339 |
|
|
|
340 |
<tr> |
|
|
341 |
<td><code>maxResults</code></td> |
|
|
342 |
<td>0</td> |
|
|
343 |
<td> |
|
|
344 |
Maximum number of results to display. A value of <code>0</code> or less will allow an unlimited number of results. |
|
|
345 |
</td> |
|
|
346 |
</tr> |
|
|
347 |
|
|
|
348 |
<tr> |
|
|
349 |
<td><code>minQueryLength</code></td> |
|
|
350 |
<td>1</td> |
|
|
351 |
<td> |
|
|
352 |
Minimum number of characters that must be entered before a <code>query</code> event will be fired. A value of <code>0</code> allows empty queries; a negative value will effectively disable all <code>query</code> events and turn AutoComplete off. |
|
|
353 |
</td> |
|
|
354 |
</tr> |
|
|
355 |
|
|
|
356 |
<tr> |
|
|
357 |
<td><code>queryDelay</code></td> |
|
|
358 |
<td>100</td> |
|
|
359 |
<td> |
|
|
360 |
<p> |
|
|
361 |
Number of milliseconds to wait after user input before triggering a <code>query</code> event. If new input occurs before this delay is over, the previous input event will be ignored and a new delay will begin. |
|
|
362 |
</p> |
|
|
363 |
|
|
|
364 |
<p> |
|
|
365 |
This is useful to throttle queries to a remote data source, and to avoid distracting the user by showing them less relevant results before their typing pauses. |
|
|
366 |
</p> |
|
|
367 |
</td> |
|
|
368 |
</tr> |
|
|
369 |
|
|
|
370 |
<tr> |
|
|
371 |
<td><code>queryDelimiter</code></td> |
|
|
372 |
<td><code>null</code></td> |
|
|
373 |
<td> |
|
|
374 |
Query delimiter string. When a delimiter is configured, the input value will be split on the delimiter, and only the last portion will be used in autocomplete queries and updated when the <code>query</code> attribute is modified. See <a href="#using-query-delimiters">Using Query Delimiters</a> below for details. |
|
|
375 |
</td> |
|
|
376 |
</tr> |
|
|
377 |
|
|
|
378 |
<tr> |
|
|
379 |
<td><code>requestTemplate</code></td> |
|
|
380 |
<td><code>null</code></td> |
|
|
381 |
<td> |
|
|
382 |
<p> |
|
|
383 |
Source request template. This can be a function that accepts a query as a parameter and returns a string, or it can be a string containing the placeholder "{query}", which will be replaced with the URI-encoded query. The resulting string will be appended to the request URL when the <code>source</code> attribute is set to a remote DataSource, JSONP URL, or XHR URL. |
|
|
384 |
</p> |
|
|
385 |
|
|
|
386 |
<p> |
|
|
387 |
When the <code>source</code> attribute is set to a YQL query, the <code>requestTemplate</code> value will be inserted in place of the "{request}" placeholder rather than being appended to the YQL query. This can be useful if you need to double-encode query values used in YQL queries. |
|
|
388 |
</p> |
|
|
389 |
</td> |
|
|
390 |
</tr> |
|
|
391 |
|
|
|
392 |
<tr> |
|
|
393 |
<td><code>resultFilters</code></td> |
|
|
394 |
<td><code>[]</code></td> |
|
|
395 |
<td> |
|
|
396 |
Result filter name, function, or array of filter names and/or functions. See <a href="#filtering-results">Filtering Results</a> for details. |
|
|
397 |
</td> |
|
|
398 |
</tr> |
|
|
399 |
|
|
|
400 |
<tr> |
|
|
401 |
<td><code>resultFormatter</code></td> |
|
|
402 |
<td><code>null</code></td> |
|
|
403 |
<td> |
|
|
404 |
Function that should be used to format results. See <a href="#writing-result-formatters">Writing Result Formatters</a> for details. |
|
|
405 |
</td> |
|
|
406 |
</tr> |
|
|
407 |
|
|
|
408 |
<tr> |
|
|
409 |
<td><code>resultHighlighter</code></td> |
|
|
410 |
<td><code>null</code></td> |
|
|
411 |
<td> |
|
|
412 |
Result highlighter name or function. See <a href="#highlighting-results">Highlighting Results</a> for details. |
|
|
413 |
</td> |
|
|
414 |
</tr> |
|
|
415 |
|
|
|
416 |
<tr> |
|
|
417 |
<td><code>resultListLocator</code></td> |
|
|
418 |
<td><code>null</code></td> |
|
|
419 |
<td> |
|
|
420 |
Locator string or function that should be used to extract an array of results from a non-array response. See <a href="#locating-results">Locating Results</a> for details. |
|
|
421 |
</td> |
|
|
422 |
</tr> |
|
|
423 |
|
|
|
424 |
<tr> |
|
|
425 |
<td><code>resultTextLocator</code></td> |
|
|
426 |
<td><code>null</code></td> |
|
|
427 |
<td> |
|
|
428 |
Locator string or function that should be used to extract a plain text string from a non-string result item. See <a href="#locating-results">Locating Results</a> for details. |
|
|
429 |
</td> |
|
|
430 |
</tr> |
|
|
431 |
|
|
|
432 |
<tr> |
|
|
433 |
<td><code>source</code></td> |
|
|
434 |
<td><code>null</code></td> |
|
|
435 |
<td> |
|
|
436 |
Source for autocomplete results. The following source types are supported: Array, DataSource, Function, Object, JSONP URL (string), XHR URL (string), YQL query (string). For details on each source type, see <a href="#result-sources">Result Sources</a>. |
|
|
437 |
</td> |
|
|
438 |
</tr> |
|
|
439 |
</tbody> |
|
|
440 |
</table> |
|
|
441 |
|
|
|
442 |
<h4 id="list-config-attributes">List Config Attributes</h4> |
|
|
443 |
|
|
|
444 |
<p> |
|
|
445 |
These attributes are provided by <code>AutoCompleteList</code>, which is the implementation for the AutoComplete list widget. They are available on all instances of <code>AutoComplete</code> or <code>AutoCompleteList</code>, as well as on instances of the AutoComplete plugin. |
|
|
446 |
</p> |
|
|
447 |
|
|
|
448 |
<table> |
|
|
449 |
<thead> |
|
|
450 |
<tr> |
|
|
451 |
<th>Attribute</th> |
|
|
452 |
<th>Default</th> |
|
|
453 |
<th>Description</th> |
|
|
454 |
</tr> |
|
|
455 |
</thead> |
|
|
456 |
<tbody> |
|
|
457 |
<tr> |
|
|
458 |
<td><code>activateFirstItem</code></td> |
|
|
459 |
<td><code>false</code></td> |
|
|
460 |
<td> |
|
|
461 |
If <code>true</code>, the first item in the result list will be activated by default when the list is initially displayed and when results change. |
|
|
462 |
</td> |
|
|
463 |
</tr> |
|
|
464 |
|
|
|
465 |
<tr> |
|
|
466 |
<td><code>align</code></td> |
|
|
467 |
<td> |
|
|
468 |
<pre><code>{ |
|
|
469 |
node: <em>inputNode</em>, |
|
|
470 |
points: ['tl', 'bl'] |
|
|
471 |
}</code></pre> |
|
|
472 |
</td> |
|
|
473 |
<td> |
|
|
474 |
Widget alignment config. The <code>node</code> property is the element with which the result list should be aligned, and the <code>points</code> property specifies (by default) that the top left of the list should be aligned with the bottom left of the <code>inputNode</code>. |
|
|
475 |
</td> |
|
|
476 |
</tr> |
|
|
477 |
|
|
|
478 |
<tr> |
|
|
479 |
<td><code>alwaysShowList</code></td> |
|
|
480 |
<td><code>false</code></td> |
|
|
481 |
<td> |
|
|
482 |
If <code>true</code>, the list will remain visible even when there are no results to display and the <code>inputNode</code> is not focused. |
|
|
483 |
</td> |
|
|
484 |
</tr> |
|
|
485 |
|
|
|
486 |
<tr> |
|
|
487 |
<td><code>circular</code></td> |
|
|
488 |
<td><code>true</code></td> |
|
|
489 |
<td> |
|
|
490 |
If <code>true</code>, keyboard navigation will wrap around to the opposite end of the list when navigating past the first or last item. |
|
|
491 |
</td> |
|
|
492 |
</tr> |
|
|
493 |
|
|
|
494 |
<tr> |
|
|
495 |
<td><code>scrollIntoView</code></td> |
|
|
496 |
<td><code>false</code></td> |
|
|
497 |
<td> |
|
|
498 |
If <code>true</code>, the viewport will be scrolled when necessary to ensure that the active list item is visible. |
|
|
499 |
</td> |
|
|
500 |
</tr> |
|
|
501 |
|
|
|
502 |
<tr> |
|
|
503 |
<td><code>tabSelect</code></td> |
|
|
504 |
<td><code>true</code></td> |
|
|
505 |
<td> |
|
|
506 |
If <code>true</code>, pressing the tab key while the list is visible will select the active item, if any. |
|
|
507 |
</td> |
|
|
508 |
</tr> |
|
|
509 |
</tbody> |
|
|
510 |
</table> |
|
|
511 |
|
|
|
512 |
<h4 id="aligning-the-list">Aligning the List</h4> |
|
|
513 |
|
|
|
514 |
<p> |
|
|
515 |
By default, the autocomplete dropdown list will be automatically aligned with the bottom left corner of the input node it's attached to, and its width will be set to match the input node's. You can change the alignment of the list by specifying a custom value for the <code>align</code> attribute. |
|
|
516 |
</p> |
|
|
517 |
|
|
|
518 |
<p> |
|
|
519 |
For example, to align the top left of the list with the top left of a particular node on the page (such as its container): |
|
|
520 |
</p> |
|
|
521 |
|
|
|
522 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
523 |
align: { |
|
|
524 |
node : '#container', |
|
|
525 |
points: ['tl', 'tl'] |
|
|
526 |
} |
|
|
527 |
});</pre> |
|
|
528 |
|
|
|
529 |
|
|
|
530 |
<p> |
|
|
531 |
See the <a href="http://yuilibrary.com/yui/docs/api/classes/WidgetPositionAlign.html">WidgetPositionAlign API docs</a> for more details on alignment configs. |
|
|
532 |
</p> |
|
|
533 |
|
|
|
534 |
<h4 id="using-query-delimiters">Using Query Delimiters</h4> |
|
|
535 |
|
|
|
536 |
<p> |
|
|
537 |
Using the <code>queryDelimiter</code> attribute, you can specify a delimiter string that should be used to split the value of the input field. |
|
|
538 |
</p> |
|
|
539 |
|
|
|
540 |
<p> |
|
|
541 |
When a delimiter is set, the <code>query</code> attribute will only reflect the last delimited item in the input value, and only this item will be used for completion (the full input value will still be available from the <code>value</code> attribute). |
|
|
542 |
</p> |
|
|
543 |
|
|
|
544 |
<p> |
|
|
545 |
For example, if <code>queryDelimiter</code> is set to <code>','</code> and the input node's value is <code>'foo, bar, baz'</code>, then the value of the <code>query</code> attribute will be <code>'baz'</code>. |
|
|
546 |
</p> |
|
|
547 |
|
|
|
548 |
<pre class="code prettyprint">var inputNode = Y.one('#ac-input'); |
|
|
549 |
|
|
|
550 |
inputNode.set('value', 'foo, bar, baz'); |
|
|
551 |
|
|
|
552 |
inputNode.plug(Y.Plugin.AutoComplete, { |
|
|
553 |
queryDelimiter: ',' |
|
|
554 |
}); |
|
|
555 |
|
|
|
556 |
Y.log(inputNode.ac.get('query')); // => 'baz' |
|
|
557 |
Y.log(inputNode.get('value')); // => 'foo, bar, baz'</pre> |
|
|
558 |
|
|
|
559 |
|
|
|
560 |
<p> |
|
|
561 |
When the user selects an item from the result list, the selected item will replace only the last delimited item in the input value rather than replacing the entire value, and another delimiter string will be automatically appended to the value so that the user can continue typing and getting suggestions. |
|
|
562 |
</p> |
|
|
563 |
|
|
|
564 |
<h3 id="autocomplete-events">AutoComplete Events</h3> |
|
|
565 |
|
|
|
566 |
<p> |
|
|
567 |
These lists only contain the most interesting events. For a complete list, please refer to the <a href="http://yuilibrary.com/yui/docs/api/modules/autocomplete.html">API docs</a>. |
|
|
568 |
</p> |
|
|
569 |
|
|
|
570 |
<h4 id="base-events">Base Events</h4> |
|
|
571 |
|
|
|
572 |
<p> |
|
|
573 |
These events are provided by <code>AutoCompleteBase</code>, which is the core foundation for the AutoComplete widget. They are available on all AutoComplete instances. |
|
|
574 |
</p> |
|
|
575 |
|
|
|
576 |
<table> |
|
|
577 |
<thead> |
|
|
578 |
<tr> |
|
|
579 |
<th>Event</th> |
|
|
580 |
<th>When</th> |
|
|
581 |
<th>Payload</th> |
|
|
582 |
</tr> |
|
|
583 |
</thead> |
|
|
584 |
<tbody> |
|
|
585 |
<tr> |
|
|
586 |
<td><code>clear</code></td> |
|
|
587 |
<td> |
|
|
588 |
The query has been completely cleared or no longer meets the minimum query length requirement. |
|
|
589 |
</td> |
|
|
590 |
<td> |
|
|
591 |
<dl> |
|
|
592 |
<dt><code>prevVal</code> <i>(String)</i></dt> |
|
|
593 |
<dd> |
|
|
594 |
Value of the query before it was cleared. |
|
|
595 |
</dd> |
|
|
596 |
</dl> |
|
|
597 |
</td> |
|
|
598 |
</tr> |
|
|
599 |
|
|
|
600 |
<tr> |
|
|
601 |
<td><code>query</code></td> |
|
|
602 |
<td> |
|
|
603 |
The value of the input field has changed and the new value meets the criteria necessary to generate an autocomplete query. Can be prevented to stop the query from being sent. |
|
|
604 |
</td> |
|
|
605 |
<td> |
|
|
606 |
<dl> |
|
|
607 |
<dt><code>inputValue</code> <i>(String)</i></dt> |
|
|
608 |
<dd> |
|
|
609 |
Full contents of the text input field or textarea that generated the query. |
|
|
610 |
</dd> |
|
|
611 |
|
|
|
612 |
<dt><code>query</code> <i>(String)</i></dt> |
|
|
613 |
<dd> |
|
|
614 |
The query itself. This is the string that will be sent to the result source to request results. It may or may not be the same as <code>inputValue</code>. |
|
|
615 |
</dd> |
|
|
616 |
</dl> |
|
|
617 |
</td> |
|
|
618 |
</tr> |
|
|
619 |
|
|
|
620 |
<tr> |
|
|
621 |
<td><code>results</code></td> |
|
|
622 |
<td> |
|
|
623 |
Results are received from the result source. If no source has been set, this event will not fire. |
|
|
624 |
</td> |
|
|
625 |
<td> |
|
|
626 |
<dl> |
|
|
627 |
<dt><code>data</code> <i>(Array|Object)</i></dt> |
|
|
628 |
<dd> |
|
|
629 |
Raw, unfiltered result data from the source (if available). |
|
|
630 |
</dd> |
|
|
631 |
|
|
|
632 |
<dt><code>query</code> <i>(String)</i></dt> |
|
|
633 |
<dd> |
|
|
634 |
Query that generated these results. |
|
|
635 |
</dd> |
|
|
636 |
|
|
|
637 |
<dt><code>results</code> <i>(Array)</i></dt> |
|
|
638 |
<dd> |
|
|
639 |
Array of filtered, formatted, and highlighted results. Each item in the array is an object with the following properties: |
|
|
640 |
|
|
|
641 |
<dl> |
|
|
642 |
<dt><code>display</code> <i>(Node|HTMLElement|String)</i></dt> |
|
|
643 |
<dd> |
|
|
644 |
Formatted result HTML suitable for display to the user. If no custom formatter is set, this will be an HTML-escaped version of the string in the <code>text</code> property. |
|
|
645 |
</dd> |
|
|
646 |
|
|
|
647 |
<dt><code>highlighted</code> <i>(String)</i></dt> |
|
|
648 |
<dd> |
|
|
649 |
Highlighted (but not formatted) result text. This property will |
|
|
650 |
only be set if a highlighter is in use. |
|
|
651 |
</dd> |
|
|
652 |
|
|
|
653 |
<dt><code>raw</code> <i>(mixed)</i></dt> |
|
|
654 |
<dd> |
|
|
655 |
Raw, unformatted result in whatever form it was provided by the |
|
|
656 |
<code>source</code>. |
|
|
657 |
</dd> |
|
|
658 |
|
|
|
659 |
<dt><code>text</code> <i>(String)</i></dt> |
|
|
660 |
<dd> |
|
|
661 |
Plain text version of the result, suitable for being inserted |
|
|
662 |
into the value of a text input field or textarea when the result |
|
|
663 |
is selected by a user. This value is not HTML-escaped and should |
|
|
664 |
not be inserted into the page using innerHTML. |
|
|
665 |
</dd> |
|
|
666 |
</dl> |
|
|
667 |
</dd> |
|
|
668 |
</dl> |
|
|
669 |
</td> |
|
|
670 |
</tr> |
|
|
671 |
</tbody> |
|
|
672 |
</table> |
|
|
673 |
|
|
|
674 |
<h4 id="list-events">List Events</h4> |
|
|
675 |
|
|
|
676 |
<p> |
|
|
677 |
These events are provided by <code>AutoCompleteList</code>, which is the implementation for the AutoComplete list widget. They are available on all instances of <code>AutoComplete</code> or <code>AutoCompleteList</code>, as well as on instances of the AutoComplete plugin. |
|
|
678 |
</p> |
|
|
679 |
|
|
|
680 |
<table> |
|
|
681 |
<thead> |
|
|
682 |
<tr> |
|
|
683 |
<th>Event</th> |
|
|
684 |
<th>When</th> |
|
|
685 |
<th>Payload</th> |
|
|
686 |
</tr> |
|
|
687 |
</thead> |
|
|
688 |
<tbody> |
|
|
689 |
<tr> |
|
|
690 |
<td><code>activeItemChange</code></td> |
|
|
691 |
<td> |
|
|
692 |
The active list item (the item currently pre-selected via the keyboard) changes. When the user presses enter, this is the item that will become selected. |
|
|
693 |
</td> |
|
|
694 |
<td> |
|
|
695 |
<dl> |
|
|
696 |
<dt><code>prevVal</code> <i>(Node|null)</i></dt> |
|
|
697 |
<dd> |
|
|
698 |
Node reference for the previously-active list item, or <code>null</code> if there wasn't one. |
|
|
699 |
</dd> |
|
|
700 |
|
|
|
701 |
<dt><code>newVal</code> <i>(Node|null)</i></dt> |
|
|
702 |
<dd> |
|
|
703 |
Node reference for the new active list item, or <code>null</code> if the active item has been cleared. |
|
|
704 |
</dd> |
|
|
705 |
</dl> |
|
|
706 |
</td> |
|
|
707 |
</tr> |
|
|
708 |
|
|
|
709 |
<tr> |
|
|
710 |
<td><code>hoveredItemChange</code></td> |
|
|
711 |
<td> |
|
|
712 |
The hovered list item (the item currently being hovered over by the mouse) changes. |
|
|
713 |
</td> |
|
|
714 |
<td> |
|
|
715 |
<dl> |
|
|
716 |
<dt><code>prevVal</code> <i>(Node|null)</i></dt> |
|
|
717 |
<dd> |
|
|
718 |
Node reference for the previously hovered list item, or <code>null</code> if there wasn't one. |
|
|
719 |
</dd> |
|
|
720 |
|
|
|
721 |
<dt><code>newVal</code> <i>(Node|null)</i></dt> |
|
|
722 |
<dd> |
|
|
723 |
Node reference for the new hovered list item, or <code>null</code> if there is no hovered item. |
|
|
724 |
</dd> |
|
|
725 |
</dl> |
|
|
726 |
</td> |
|
|
727 |
</tr> |
|
|
728 |
|
|
|
729 |
<tr> |
|
|
730 |
<td><code>select</code></td> |
|
|
731 |
<td> |
|
|
732 |
A result is selected from the autocomplete list, typically via a keyboard action or a mouse click. |
|
|
733 |
</td> |
|
|
734 |
<td> |
|
|
735 |
<dl> |
|
|
736 |
<dt><code>itemNode</code> <i>(Node)</i></dt> |
|
|
737 |
<dd> |
|
|
738 |
Node reference for the list item that was selected. |
|
|
739 |
</dd> |
|
|
740 |
|
|
|
741 |
<dt><code>result</code> <i>(Object)</i></dt> |
|
|
742 |
<dd> |
|
|
743 |
Result object for the selected result. See the docs for the <code>results</code> event for a description of the result object structure. |
|
|
744 |
</dd> |
|
|
745 |
</dl> |
|
|
746 |
</td> |
|
|
747 |
</tr> |
|
|
748 |
|
|
|
749 |
<tr> |
|
|
750 |
<td><code>visibleChange</code></td> |
|
|
751 |
<td> |
|
|
752 |
The visibility of the result list changes. |
|
|
753 |
</td> |
|
|
754 |
<td> |
|
|
755 |
<dl> |
|
|
756 |
<dt><code>prevVal</code> <i>(Boolean)</i></dt> |
|
|
757 |
<dd> |
|
|
758 |
Previous visibility of the list. |
|
|
759 |
</dd> |
|
|
760 |
|
|
|
761 |
<dt><code>newVal</code> <i>(Boolean)</i></dt> |
|
|
762 |
<dd> |
|
|
763 |
New visibility of the list. |
|
|
764 |
</dd> |
|
|
765 |
</dl> |
|
|
766 |
</td> |
|
|
767 |
</tr> |
|
|
768 |
</tbody> |
|
|
769 |
</table> |
|
|
770 |
|
|
|
771 |
<h3 id="result-sources">Result Sources</h3> |
|
|
772 |
|
|
|
773 |
<h4 id="arrayobject">Array/Object</h4> |
|
|
774 |
|
|
|
775 |
<p> |
|
|
776 |
Set the <code>source</code> attribute to an Array to use that array as the set of results for all queries. Combine this with one or more result filters to filter out results that aren't relevant for the current query. |
|
|
777 |
</p> |
|
|
778 |
|
|
|
779 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
780 |
source: ['foo', 'bar', 'baz'] |
|
|
781 |
});</pre> |
|
|
782 |
|
|
|
783 |
|
|
|
784 |
<p> |
|
|
785 |
You can also set <code>source</code> to an Object. When the query matches one of the properties on the object, the value of that property will be used as the results for the query. |
|
|
786 |
</p> |
|
|
787 |
|
|
|
788 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
789 |
source: { |
|
|
790 |
a: ['apple', 'airplane', 'awesome'], |
|
|
791 |
b: ['banana', 'boat', 'boring'], |
|
|
792 |
c: ['cherry', 'car', 'cacophonous'] |
|
|
793 |
} |
|
|
794 |
});</pre> |
|
|
795 |
|
|
|
796 |
|
|
|
797 |
<h4 id="datasource">DataSource</h4> |
|
|
798 |
|
|
|
799 |
<p> |
|
|
800 |
Any <a href="../datasource/index.html">YUI DataSource</a> instance may be used as a result source. This is useful if you want to share data between multiple components on a page, or if you need to parse data or apply a DataSchema in a way that isn't feasible with other AutoComplete sources. |
|
|
801 |
</p> |
|
|
802 |
|
|
|
803 |
<pre class="code prettyprint">var ds = new Y.DataSource.IO({ |
|
|
804 |
source: 'http://example.com/search' |
|
|
805 |
}); |
|
|
806 |
|
|
|
807 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
808 |
requestTemplate: '?q={query}', |
|
|
809 |
source: ds |
|
|
810 |
});</pre> |
|
|
811 |
|
|
|
812 |
|
|
|
813 |
<p> |
|
|
814 |
In this example, the <code>requestTemplate</code> attribute is set to a string containing a <code>{query}</code> placeholder. On each query, the placeholder will be replaced with the URI-encoded query value, and the resulting request string will be appended to the DataSource's source URL, resulting in a final URL like <code>http://example.com/search?q=foo</code>. |
|
|
815 |
</p> |
|
|
816 |
|
|
|
817 |
<h4 id="function">Function</h4> |
|
|
818 |
|
|
|
819 |
<p> |
|
|
820 |
Set the <code>source</code> attribute to a function to use that function as the result source. On each query, the function will be called with two arguments: the current query, and a callback function. |
|
|
821 |
</p> |
|
|
822 |
|
|
|
823 |
<p> |
|
|
824 |
If the function is synchronous, meaning that results are available immediately, then it should return an array of results: |
|
|
825 |
</p> |
|
|
826 |
|
|
|
827 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
828 |
// Synchronous source function. |
|
|
829 |
source: function (query) { |
|
|
830 |
// ...arbitrary logic here... |
|
|
831 |
|
|
|
832 |
return ['foo', 'bar', 'baz']; |
|
|
833 |
} |
|
|
834 |
});</pre> |
|
|
835 |
|
|
|
836 |
|
|
|
837 |
<p> |
|
|
838 |
If the function is asynchronous, meaning that it must make a network call or perform some other non-blocking activity from which it can't return results immediately, then an array of results should be passed to the provided callback function when the results become available, and the function should <em>not</em> return a value: |
|
|
839 |
</p> |
|
|
840 |
|
|
|
841 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
842 |
// Asynchronous source function. |
|
|
843 |
source: function (query, callback) { |
|
|
844 |
// Wait a little while without blocking execution, then provide results. |
|
|
845 |
// This simulates a non-blocking operation such as a JSONP or XHR request. |
|
|
846 |
setTimeout(function () { |
|
|
847 |
callback(['foo', 'bar', 'baz']); |
|
|
848 |
}, 100); |
|
|
849 |
|
|
|
850 |
// Note that the source function doesn't return a value. |
|
|
851 |
} |
|
|
852 |
});</pre> |
|
|
853 |
|
|
|
854 |
|
|
|
855 |
<h4 id="jsonpxhr-url">JSONP/XHR URL</h4> |
|
|
856 |
|
|
|
857 |
<p> |
|
|
858 |
Set the <code>source</code> attribute to a URL string to use that URL as the result source. |
|
|
859 |
</p> |
|
|
860 |
|
|
|
861 |
<p> |
|
|
862 |
The URL string must include a <code>{query}</code> placeholder. On each query, AutoComplete will replace this with the current query and will make a request to the URL. |
|
|
863 |
</p> |
|
|
864 |
|
|
|
865 |
<p> |
|
|
866 |
If the URL string includes a <code>{callback}</code> placeholder, it will be called using JSONP, and the <code>{callback}</code> placeholder will be replaced with the name of a dynamically generated JSONP callback function that AutoComplete will create. The server is expected to respond with a JavaScript value wrapped in a call to this callback function. |
|
|
867 |
</p> |
|
|
868 |
|
|
|
869 |
<p> |
|
|
870 |
If the URL string does not include a <code>{callback}</code> placeholder, it will be called using XHR (XMLHttpRequest). XHR URLs <em>must</em> abide by the <a href="https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript">same origin policy</a> or the browser will refuse to send the request. The server is expected to respond with valid JSON data, which AutoComplete will attempt to parse. |
|
|
871 |
</p> |
|
|
872 |
|
|
|
873 |
<pre class="code prettyprint">// JSONP URL source. |
|
|
874 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
875 |
source: 'http://example.com/search.jsonp?q={query}&callback={callback}' |
|
|
876 |
}); |
|
|
877 |
|
|
|
878 |
// XHR URL source (no callback). |
|
|
879 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
880 |
source: 'http://example.com/search.json?q={query}' |
|
|
881 |
});</pre> |
|
|
882 |
|
|
|
883 |
|
|
|
884 |
<p> |
|
|
885 |
You may also optionally include a <code>{maxResults}</code> placeholder in the URL, which will be replaced with the value of the <code>maxResults</code> attribute (or 1000 if the <code>maxResults</code> attribute is less than or equal to 0). |
|
|
886 |
</p> |
|
|
887 |
|
|
|
888 |
<p> |
|
|
889 |
Responses from JSONP and XHR URL sources are automatically cached based on the query value for the duration of the pageview on a per-instance basis (in other words, every AutoComplete instance has its own separate cache). |
|
|
890 |
</p> |
|
|
891 |
|
|
|
892 |
<h4 id="select-node"><code><select></code> Node</h4> |
|
|
893 |
|
|
|
894 |
<p> |
|
|
895 |
Set the <code>source</code> attribute to a <code><select></code> node to use its list of items as results. You'll also need to set the <code>resultTextLocator</code> attribute to 'text' or 'value' depending on what you want to use as the text of each result. |
|
|
896 |
</p> |
|
|
897 |
|
|
|
898 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
899 |
resultTextLocator: 'text', |
|
|
900 |
source: Y.one('#my-list') |
|
|
901 |
});</pre> |
|
|
902 |
|
|
|
903 |
|
|
|
904 |
<p> |
|
|
905 |
Each result from a <code><select></code> source will be an object with the following properties: |
|
|
906 |
</p> |
|
|
907 |
|
|
|
908 |
<dl> |
|
|
909 |
<dt><code>html</code> <i>(String)</i></dt> |
|
|
910 |
<dd> |
|
|
911 |
<p>HTML content of the <code><option></code> element.</p> |
|
|
912 |
</dd> |
|
|
913 |
|
|
|
914 |
<dt><code>index</code> <i>(Number)</i></dt> |
|
|
915 |
<dd> |
|
|
916 |
<p>Index of the <code><option></code> element in the list.</p> |
|
|
917 |
</dd> |
|
|
918 |
|
|
|
919 |
<dt><code>node</code> <i>(Y.Node)</i></dt> |
|
|
920 |
<dd> |
|
|
921 |
<p>Node instance referring to the original <code><option></code> element.</p> |
|
|
922 |
</dd> |
|
|
923 |
|
|
|
924 |
<dt><code>selected</code> <i>(Boolean)</i></dt> |
|
|
925 |
<dd> |
|
|
926 |
<p>Whether or not this item is currently selected in the |
|
|
927 |
<code><select></code> list.</p> |
|
|
928 |
</dd> |
|
|
929 |
|
|
|
930 |
<dt><code>text</code> <i>(String)</i></dt> |
|
|
931 |
<dd> |
|
|
932 |
<p>Text content of the <code><option></code> element.</p> |
|
|
933 |
</dd> |
|
|
934 |
|
|
|
935 |
<dt><code>value</code> <i>(String)</i></dt> |
|
|
936 |
<dd> |
|
|
937 |
<p>Value of the <code><option></code> element.</p> |
|
|
938 |
</dd> |
|
|
939 |
</dl> |
|
|
940 |
|
|
|
941 |
<h4 id="yql-query">YQL Query</h4> |
|
|
942 |
|
|
|
943 |
<p> |
|
|
944 |
Set the <code>source</code> attribute to a <a href="http://developer.yahoo.com/yql/">YQL</a> query string to use that YQL query as the result source. |
|
|
945 |
</p> |
|
|
946 |
|
|
|
947 |
<p> |
|
|
948 |
The string may include a <code>{query}</code> placeholder. On each query, AutoComplete will replace this with the current query and will make a call to YQL to get results. |
|
|
949 |
</p> |
|
|
950 |
|
|
|
951 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
952 |
source: 'select * from search.suggest where query="{query}"' |
|
|
953 |
});</pre> |
|
|
954 |
|
|
|
955 |
|
|
|
956 |
<p> |
|
|
957 |
You may use a <code>{request}</code> placeholder to insert the <code>requestTemplate</code> value rather than the raw query. This allows you to customize the query if desired (such as by double-escaping it, which is necessary for some YQL queries that embed URLs). |
|
|
958 |
</p> |
|
|
959 |
|
|
|
960 |
<p> |
|
|
961 |
You may also optionally include a <code>{maxResults}</code> placeholder in the YQL query, which will be replaced with the value of the <code>maxResults</code> attribute (or 1000 if the <code>maxResults</code> attribute is less than or equal to 0). |
|
|
962 |
</p> |
|
|
963 |
|
|
|
964 |
<p> |
|
|
965 |
AutoComplete does its best to automatically parse results out of YQL responses, but a wide variety of different YQL response formats are possible, so it may not always be possible for AutoComplete to guess the correct format. If you find that results aren't being parsed correctly, you may need to specify a custom <code>resultListLocator</code> and/or <code>resultTextLocator</code> as described in <a href="#locating-results">Locating Results</a>. |
|
|
966 |
</p> |
|
|
967 |
|
|
|
968 |
<h3 id="locating-results">Locating Results</h3> |
|
|
969 |
|
|
|
970 |
<h4 id="result-list-locator">Result List Locator</h4> |
|
|
971 |
|
|
|
972 |
<p> |
|
|
973 |
It's not uncommon for a result source to return results inside a larger data structure, such as an object that contains other metadata about the response alongside the results. |
|
|
974 |
</p> |
|
|
975 |
|
|
|
976 |
<pre class="code prettyprint">{ |
|
|
977 |
"status": "ok", |
|
|
978 |
"query": "sample response", |
|
|
979 |
|
|
|
980 |
"data": { |
|
|
981 |
"results": [ |
|
|
982 |
"foo", |
|
|
983 |
"bar", |
|
|
984 |
"baz" |
|
|
985 |
], |
|
|
986 |
|
|
|
987 |
"resultCount": 3 |
|
|
988 |
} |
|
|
989 |
}</pre> |
|
|
990 |
|
|
|
991 |
|
|
|
992 |
<p> |
|
|
993 |
While AutoComplete automatically knows how to handle results that come back as a simple array, it needs some extra information in order to find a result array that's buried inside an object hierarchy. That's where the <code>resultListLocator</code> config attribute comes in. |
|
|
994 |
</p> |
|
|
995 |
|
|
|
996 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
997 |
resultListLocator: 'data.results', |
|
|
998 |
source: 'http://example.com/search.jsonp?q={query}&callback={callback}' |
|
|
999 |
});</pre> |
|
|
1000 |
|
|
|
1001 |
|
|
|
1002 |
<p> |
|
|
1003 |
In the example above, the <code>resultListLocator</code> tells AutoComplete to look for a <code>data</code> property on the response object, followed by a <code>results</code> sub-property that contains an array of results. The hierarchy may be arbitrarily deep, as long as it's consistent across responses. |
|
|
1004 |
</p> |
|
|
1005 |
|
|
|
1006 |
<p> |
|
|
1007 |
If the response format isn't always the same, you can specify a function as the <code>resultListLocator</code> and run your own arbitrary logic to find (or construct) the result array. The function will receive the raw response as an argument, and must return an array of results. |
|
|
1008 |
</p> |
|
|
1009 |
|
|
|
1010 |
<pre class="code prettyprint">// Does the same thing as the previous example, but using a function. |
|
|
1011 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1012 |
resultListLocator: function (response) { |
|
|
1013 |
return (response && response.data && response.data.results) || []; |
|
|
1014 |
}, |
|
|
1015 |
|
|
|
1016 |
source: 'http://example.com/search.jsonp?q={query}&callback={callback}' |
|
|
1017 |
});</pre> |
|
|
1018 |
|
|
|
1019 |
|
|
|
1020 |
<h4 id="result-text-locator">Result Text Locator</h4> |
|
|
1021 |
|
|
|
1022 |
<p> |
|
|
1023 |
Not all results are simple strings. Sometimes a result is an object containing lots of metadata, only part of which is a text string. In cases like this, AutoComplete needs to know how to find some text that it can display in the result list, use for highlighting, and insert into the input field when the user selects a result. |
|
|
1024 |
</p> |
|
|
1025 |
|
|
|
1026 |
<p> |
|
|
1027 |
In the following sample, which is a subset of the data you might see in a response from the <a href="https://dev.twitter.com/docs/api/1/get/search">Twitter Search API</a>, an array of tweet objects is returned. |
|
|
1028 |
</p> |
|
|
1029 |
|
|
|
1030 |
<pre class="code prettyprint">{ |
|
|
1031 |
"query": "documentation", |
|
|
1032 |
"results": [ |
|
|
1033 |
{ |
|
|
1034 |
"from_user": "yaypie", |
|
|
1035 |
"from_user_id": 3840589, |
|
|
1036 |
"from_user_id_str": "3840589", |
|
|
1037 |
"created_at": "Mon, 06 Dec 2010 22:58:08 +0000", |
|
|
1038 |
"id": 11917333878538241, |
|
|
1039 |
"id_str": "11917333878538241", |
|
|
1040 |
"text": "Is there such a thing as too much documentation?", |
|
|
1041 |
"profile_image_url": "http://a3.twimg.com/profile_images/994441119/ryan-profile-big_normal.jpg" |
|
|
1042 |
}, |
|
|
1043 |
|
|
|
1044 |
... |
|
|
1045 |
] |
|
|
1046 |
}</pre> |
|
|
1047 |
|
|
|
1048 |
|
|
|
1049 |
<p> |
|
|
1050 |
The <code>resultTextLocator</code> config attribute can be used to tell AutoComplete how to find some text within an individual result object, much like the <code>resultListLocator</code> attribute tells AutoComplete how to find an array of results within a response object. |
|
|
1051 |
</p> |
|
|
1052 |
|
|
|
1053 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1054 |
resultListLocator: 'results', |
|
|
1055 |
resultTextLocator: 'text', |
|
|
1056 |
source: 'http://search.twitter.com/search.json?q={query}&callback={callback}' |
|
|
1057 |
});</pre> |
|
|
1058 |
|
|
|
1059 |
|
|
|
1060 |
<p> |
|
|
1061 |
This tells AutoComplete that the value of each result object's <code>text</code> property should be used whenever a plain text form of the result is needed. |
|
|
1062 |
</p> |
|
|
1063 |
|
|
|
1064 |
<p> |
|
|
1065 |
The <code>resultTextLocator</code> can also be a function, which allows you to perform additional logic, such as combining multiple values into a single text string. The function will receive a single result object as an argument, and must return a text string. It will be called once for each result in the results array. |
|
|
1066 |
</p> |
|
|
1067 |
|
|
|
1068 |
<pre class="code prettyprint">Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1069 |
resultListLocator: 'results', |
|
|
1070 |
|
|
|
1071 |
resultTextLocator: function (result) { |
|
|
1072 |
return result.from_user + ': ' + result.text; |
|
|
1073 |
}, |
|
|
1074 |
|
|
|
1075 |
source: 'http://search.twitter.com/search.json?q={query}&callback={callback}' |
|
|
1076 |
});</pre> |
|
|
1077 |
|
|
|
1078 |
|
|
|
1079 |
<h3 id="filtering-results">Filtering Results</h3> |
|
|
1080 |
|
|
|
1081 |
<p> |
|
|
1082 |
After results are retrieved from a result source, it may be necessary to perform additional filtering to whittle down the result list to match the query, especially if the result source doesn't perform filtering itself. The <code>resultFilters</code> attribute can be used to specify a filter or array of filters for this purpose. |
|
|
1083 |
</p> |
|
|
1084 |
|
|
|
1085 |
<p> |
|
|
1086 |
A result filter is simply a function that accepts the current query and an array of result objects as arguments, and returns a filtered array of result objects. |
|
|
1087 |
</p> |
|
|
1088 |
|
|
|
1089 |
<p> |
|
|
1090 |
The <code>autocomplete-filters</code> module provides a prepackaged collection of result filters. This module isn't loaded by default in the <code>autocomplete</code> rollup, but can be loaded manually as needed. |
|
|
1091 |
</p> |
|
|
1092 |
|
|
|
1093 |
<pre class="code prettyprint">// Include the autocomplete-filters module to use prepackaged filters. |
|
|
1094 |
YUI().use('autocomplete', 'autocomplete-filters', function (Y) { |
|
|
1095 |
|
|
|
1096 |
// Specify the name of the prepackaged filter you want to use, as |
|
|
1097 |
// a string. |
|
|
1098 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1099 |
resultFilters: 'phraseMatch' |
|
|
1100 |
}); |
|
|
1101 |
|
|
|
1102 |
// To use multiple filters, provide an array. Results will be passed |
|
|
1103 |
// through each filter in the order they're listed in the array. |
|
|
1104 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1105 |
resultFilters: ['charMatch', 'wordMatch'] |
|
|
1106 |
}); |
|
|
1107 |
|
|
|
1108 |
});</pre> |
|
|
1109 |
|
|
|
1110 |
|
|
|
1111 |
<p> |
|
|
1112 |
The following filters are available in the <code>autocomplete-filters</code> module: |
|
|
1113 |
</p> |
|
|
1114 |
|
|
|
1115 |
<table> |
|
|
1116 |
<thead> |
|
|
1117 |
<tr> |
|
|
1118 |
<th>Filter</th> |
|
|
1119 |
<th>Description</th> |
|
|
1120 |
</tr> |
|
|
1121 |
</thead> |
|
|
1122 |
<tbody> |
|
|
1123 |
<tr> |
|
|
1124 |
<td><code>charMatch</code></td> |
|
|
1125 |
<td> |
|
|
1126 |
Returns results that contain all of the individual characters in the query, in any order (not necessarily consecutive). |
|
|
1127 |
</td> |
|
|
1128 |
</tr> |
|
|
1129 |
|
|
|
1130 |
<tr> |
|
|
1131 |
<td><code>phraseMatch</code></td> |
|
|
1132 |
<td> |
|
|
1133 |
Returns results that contain the complete query as a phrase. |
|
|
1134 |
</td> |
|
|
1135 |
</tr> |
|
|
1136 |
|
|
|
1137 |
<tr> |
|
|
1138 |
<td><code>startsWith</code></td> |
|
|
1139 |
<td> |
|
|
1140 |
Returns results that start with the complete query as a phrase. |
|
|
1141 |
</td> |
|
|
1142 |
</tr> |
|
|
1143 |
|
|
|
1144 |
<tr> |
|
|
1145 |
<td><code>subWordMatch</code></td> |
|
|
1146 |
<td> |
|
|
1147 |
Returns results in which all the words of the query match either whole words or parts of words in the result. Non-word characters like whitespace and certain punctuation are ignored. |
|
|
1148 |
</td> |
|
|
1149 |
</tr> |
|
|
1150 |
|
|
|
1151 |
<tr> |
|
|
1152 |
<td><code>wordMatch</code></td> |
|
|
1153 |
<td> |
|
|
1154 |
Returns results that contain all the individual words in the query, in any order (not necessarily consecutive). |
|
|
1155 |
</td> |
|
|
1156 |
</tr> |
|
|
1157 |
</tbody> |
|
|
1158 |
</table> |
|
|
1159 |
|
|
|
1160 |
<p> |
|
|
1161 |
By default, all filters are case-insensitive. Case-sensitive versions are available, and can be used by appending <code>Case</code> to the filter name. For example, the case-sensitive version of the <code>phraseMatch</code> filter is <code>phraseMatchCase</code>. |
|
|
1162 |
</p> |
|
|
1163 |
|
|
|
1164 |
<p> |
|
|
1165 |
In addition to the standard set of filters, the optional <code>autocomplete-filters-accentfold</code> module provides a set of filters that perform accent-folded matching. |
|
|
1166 |
</p> |
|
|
1167 |
|
|
|
1168 |
<p> |
|
|
1169 |
Accent folding is when a character like <code>é</code> is converted to a non-accented form like <code>e</code>. This can be useful for performing loose matching (such as matching the word "résumé" when the query "resume" is typed), but also has some important caveats you should be aware of. See the <a href="#known-issues">Known Issues</a> section below for details. |
|
|
1170 |
</p> |
|
|
1171 |
|
|
|
1172 |
<p> |
|
|
1173 |
To use accent folding filters, include the <code>autocomplete-filters-accentfold</code> module, then specify a filter by appending <code>Fold</code> to the name. For example, the accent folding version of the <code>phraseMatch</code> filter is <code>phraseMatchFold</code>. Note that all accent folding filters are case-insensitive. |
|
|
1174 |
</p> |
|
|
1175 |
|
|
|
1176 |
<h3 id="highlighting-results">Highlighting Results</h3> |
|
|
1177 |
|
|
|
1178 |
<p> |
|
|
1179 |
After results are retrieved and (optionally) filtered, you may want to highlight occurrences of the query within each result in order to indicate to the user why that result is relevant to what they typed. The <code>resultHighlighter</code> attribute can be used to specify a result highlighter for this purpose. |
|
|
1180 |
</p> |
|
|
1181 |
|
|
|
1182 |
<p> |
|
|
1183 |
Like a result filter, a highlighter is simply a function that accepts the current query and an array of result objects as arguments. Whereas filters return a filtered array of result objects, highlighters return an array of HTML strings which will be used when results are displayed to the user. |
|
|
1184 |
</p> |
|
|
1185 |
|
|
|
1186 |
<p> |
|
|
1187 |
The <code>autocomplete-highlighters</code> module provides a prepackaged collection of result highlighters. This module isn't loaded by default in the <code>autocomplete</code> rollup, but can be loaded manually as needed. |
|
|
1188 |
</p> |
|
|
1189 |
|
|
|
1190 |
<pre class="code prettyprint">// Include the autocomplete-highlighters module to use prepackaged |
|
|
1191 |
// highlighters. |
|
|
1192 |
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) { |
|
|
1193 |
|
|
|
1194 |
// Specify the name of the prepackaged highlighter you want to |
|
|
1195 |
// use, as a string. Unlike result filters, only one highlighter |
|
|
1196 |
// may be used at a time. |
|
|
1197 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1198 |
resultHighlighter: 'phraseMatch' |
|
|
1199 |
}); |
|
|
1200 |
|
|
|
1201 |
});</pre> |
|
|
1202 |
|
|
|
1203 |
|
|
|
1204 |
<p> |
|
|
1205 |
The following highlighters are available in the <code>autocomplete-highlighters</code> module: |
|
|
1206 |
</p> |
|
|
1207 |
|
|
|
1208 |
<table> |
|
|
1209 |
<thead> |
|
|
1210 |
<tr> |
|
|
1211 |
<th>Highlighter</th> |
|
|
1212 |
<th>Description</th> |
|
|
1213 |
</tr> |
|
|
1214 |
</thead> |
|
|
1215 |
<tbody> |
|
|
1216 |
<tr> |
|
|
1217 |
<td><code>charMatch</code></td> |
|
|
1218 |
<td> |
|
|
1219 |
Highlights individual query characters that occur anywhere in the result, in any order (not necessarily consecutive). |
|
|
1220 |
</td> |
|
|
1221 |
</tr> |
|
|
1222 |
|
|
|
1223 |
<tr> |
|
|
1224 |
<td><code>phraseMatch</code></td> |
|
|
1225 |
<td> |
|
|
1226 |
Highlights the complete query as a phrase anywhere in the result. |
|
|
1227 |
</td> |
|
|
1228 |
</tr> |
|
|
1229 |
|
|
|
1230 |
<tr> |
|
|
1231 |
<td><code>startsWith</code></td> |
|
|
1232 |
<td> |
|
|
1233 |
Highlights the complete query as a phrase at the start of the result. |
|
|
1234 |
</td> |
|
|
1235 |
</tr> |
|
|
1236 |
|
|
|
1237 |
<tr> |
|
|
1238 |
<td><code>subWordMatch</code></td> |
|
|
1239 |
<td> |
|
|
1240 |
Highlights results in which all the words of the query match either whole words or parts of words in the result. Non-word characters like whitespace and certain punctuation are ignored. |
|
|
1241 |
</td> |
|
|
1242 |
</tr> |
|
|
1243 |
|
|
|
1244 |
<tr> |
|
|
1245 |
<td><code>wordMatch</code></td> |
|
|
1246 |
<td> |
|
|
1247 |
Highlights individual words in the result that are also in the query, in any order (not necessarily consecutive). Non-word characters like punctuation are ignored. |
|
|
1248 |
</td> |
|
|
1249 |
</tr> |
|
|
1250 |
</tbody> |
|
|
1251 |
</table> |
|
|
1252 |
|
|
|
1253 |
<p> |
|
|
1254 |
The prepackaged highlighters use a <code><b></code> element with the class <code>yui3-highlight</code> to highlight results. You can style the highlighting using CSS by referring to that class name. |
|
|
1255 |
</p> |
|
|
1256 |
|
|
|
1257 |
<p> |
|
|
1258 |
By default, all highlighters are case-insensitive. Case-sensitive versions are available, and can be used by appending <code>Case</code> to the highlighter name. For example, the case-sensitive version of the <code>phraseMatch</code> highlighter is <code>phraseMatchCase</code>. |
|
|
1259 |
</p> |
|
|
1260 |
|
|
|
1261 |
<p> |
|
|
1262 |
In addition to the standard set of highlighters, the optional <code>autocomplete-highlighters-accentfold</code> module provides a set of highlighters that perform accent-folded highlighting. |
|
|
1263 |
</p> |
|
|
1264 |
|
|
|
1265 |
<p> |
|
|
1266 |
To use accent folding highlighters, include the <code>autocomplete-highlighters-accentfold</code> module, then specifiy a highlighter by appending <code>Fold</code> to the name. For example, the accent folding version of the <code>phraseMatch</code> highlighter is <code>phraseMatchFold</code>. Note that all accent folding highlighters are case-insensitive. |
|
|
1267 |
</p> |
|
|
1268 |
|
|
|
1269 |
<p> |
|
|
1270 |
When using accent folding highlighters, there are some important caveats you should be aware of. See the <a href="#known-issues">Known Issues</a> section below for details. |
|
|
1271 |
</p> |
|
|
1272 |
|
|
|
1273 |
<h2 id="customizing-autocomplete">Customizing AutoComplete</h2> |
|
|
1274 |
<h3 id="skinning">Skinning</h3> |
|
|
1275 |
|
|
|
1276 |
<p> |
|
|
1277 |
AutoComplete uses the following CSS classes to provide skinning hooks for its markup. See the <a href="#dom-structure">DOM Structure</a> for an example of the markup generated by the AutoComplete widget. |
|
|
1278 |
</p> |
|
|
1279 |
|
|
|
1280 |
<p> |
|
|
1281 |
You can add your own CSS to override the styling of these classes and customize the display and layout of the AutoComplete widget. |
|
|
1282 |
</p> |
|
|
1283 |
|
|
|
1284 |
<table> |
|
|
1285 |
<thead> |
|
|
1286 |
<tr> |
|
|
1287 |
<th>CSS Class</th> |
|
|
1288 |
<th>Description</th> |
|
|
1289 |
</tr> |
|
|
1290 |
</thead> |
|
|
1291 |
<tbody> |
|
|
1292 |
<tr> |
|
|
1293 |
<td style="white-space:nowrap;"><code>yui3-aclist</code></td> |
|
|
1294 |
<td> |
|
|
1295 |
The <code>boundingBox</code> node that contains the rest of the AutoComplete list widget markup. |
|
|
1296 |
</td> |
|
|
1297 |
</tr> |
|
|
1298 |
|
|
|
1299 |
<tr> |
|
|
1300 |
<td style="white-space:nowrap;"><code>yui3-aclist-aria</code></td> |
|
|
1301 |
<td> |
|
|
1302 |
ARIA live region container used to announce list updates to users of assistive tools. Positioned offscreen by default to make it invisible to sighted users. |
|
|
1303 |
</td> |
|
|
1304 |
</tr> |
|
|
1305 |
|
|
|
1306 |
<tr> |
|
|
1307 |
<td style="white-space:nowrap;"><code>yui3-aclist-content</code></td> |
|
|
1308 |
<td> |
|
|
1309 |
The <code>contentBox</code> node that contains the AutoComplete list widget content. Apply visual styling like borders, padding, and margins to this node rather than the <code>boundingBox</code>. |
|
|
1310 |
</td> |
|
|
1311 |
</tr> |
|
|
1312 |
|
|
|
1313 |
<tr> |
|
|
1314 |
<td style="white-space:nowrap;"><code>yui3-aclist-hidden</code></td> |
|
|
1315 |
<td> |
|
|
1316 |
Class added to elements that should be hidden from both sighted and unsighted users, such as when the AutoComplete list is hidden. |
|
|
1317 |
</td> |
|
|
1318 |
</tr> |
|
|
1319 |
|
|
|
1320 |
<tr> |
|
|
1321 |
<td style="white-space:nowrap;"><code>yui3-aclist-input</code></td> |
|
|
1322 |
<td> |
|
|
1323 |
The <code>inputNode</code>. This node must already exist on the page and will not be created by AutoComplete, but AutoComplete will add the class name to make it consistently skinnable. |
|
|
1324 |
</td> |
|
|
1325 |
</tr> |
|
|
1326 |
|
|
|
1327 |
<tr> |
|
|
1328 |
<td style="white-space:nowrap;"><code>yui3-aclist-item</code></td> |
|
|
1329 |
<td> |
|
|
1330 |
A single result item node inside the result list. |
|
|
1331 |
</td> |
|
|
1332 |
</tr> |
|
|
1333 |
|
|
|
1334 |
<tr> |
|
|
1335 |
<td style="white-space:nowrap;"><code>yui3-aclist-item-active</code></td> |
|
|
1336 |
<td> |
|
|
1337 |
An active result item node. |
|
|
1338 |
</td> |
|
|
1339 |
</tr> |
|
|
1340 |
|
|
|
1341 |
<tr> |
|
|
1342 |
<td style="white-space:nowrap;"><code>yui3-aclist-item-hover</code></td> |
|
|
1343 |
<td> |
|
|
1344 |
A result item node over which the mouse is currently hovering. |
|
|
1345 |
</td> |
|
|
1346 |
</tr> |
|
|
1347 |
|
|
|
1348 |
<tr> |
|
|
1349 |
<td style="white-space:nowrap;"><code>yui3-aclist-list</code></td> |
|
|
1350 |
<td> |
|
|
1351 |
The <code>listNode</code> that contains result item nodes. |
|
|
1352 |
</td> |
|
|
1353 |
</tr> |
|
|
1354 |
</tbody> |
|
|
1355 |
</table> |
|
|
1356 |
|
|
|
1357 |
<h3 id="writing-result-filters">Writing Result Filters</h3> |
|
|
1358 |
|
|
|
1359 |
<p> |
|
|
1360 |
As described in <a href="#filtering-results">Filtering Results</a>, a result filter is just a function that accepts the current query and an array of result objects as arguments, and returns a filtered array of result objects. |
|
|
1361 |
</p> |
|
|
1362 |
|
|
|
1363 |
<p> |
|
|
1364 |
To use a custom filter, assign it to the <code>resultFilters</code> config attribute. |
|
|
1365 |
</p> |
|
|
1366 |
|
|
|
1367 |
<pre class="code prettyprint">// Simple example of a case-insensitive phrase matching custom |
|
|
1368 |
// filter. |
|
|
1369 |
function customFilter(query, results) { |
|
|
1370 |
query = query.toLowerCase(); |
|
|
1371 |
|
|
|
1372 |
// Iterate through the array of results and return a filtered |
|
|
1373 |
// array containing only results whose text includes the full |
|
|
1374 |
// query. |
|
|
1375 |
return Y.Array.filter(results, function (result) { |
|
|
1376 |
return result.text.toLowerCase().indexOf(query) !== -1; |
|
|
1377 |
}); |
|
|
1378 |
} |
|
|
1379 |
|
|
|
1380 |
// Create an AutoComplete instance that uses the custom filter. |
|
|
1381 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1382 |
resultFilters: customFilter |
|
|
1383 |
});</pre> |
|
|
1384 |
|
|
|
1385 |
|
|
|
1386 |
<h3 id="writing-result-highlighters">Writing Result Highlighters</h3> |
|
|
1387 |
|
|
|
1388 |
<p> |
|
|
1389 |
A result highlighter is similar to a result filter, but instead of returning a filtered array of results, it returns an array of HTML strings. |
|
|
1390 |
</p> |
|
|
1391 |
|
|
|
1392 |
<pre class="code prettyprint">// Simple example of a case-insensitive custom phrase highlighter. |
|
|
1393 |
// Uses Y.Highlight, which is provided by the 'highlight' module. |
|
|
1394 |
function customHighlighter(query, results) { |
|
|
1395 |
return Y.Array.map(results, function (result) { |
|
|
1396 |
return Y.Highlight.all(result.text, query); |
|
|
1397 |
}); |
|
|
1398 |
} |
|
|
1399 |
|
|
|
1400 |
// Create an AutoComplete instance that uses the custom highlighter. |
|
|
1401 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1402 |
resultHighlighter: customHighlighter |
|
|
1403 |
});</pre> |
|
|
1404 |
|
|
|
1405 |
|
|
|
1406 |
<h3 id="writing-result-formatters">Writing Result Formatters</h3> |
|
|
1407 |
|
|
|
1408 |
<p> |
|
|
1409 |
A result formatter is a function that receives the current query and an array of result objects as arguments, and must return an array of HTML strings or Node instances. Formatters run after filters and highlighters, and their output will be used for the display of result items in the final list of results. |
|
|
1410 |
</p> |
|
|
1411 |
|
|
|
1412 |
<p> |
|
|
1413 |
An array of result objects created from a Twitter Search API response would look something like this after filtering and highlighting: |
|
|
1414 |
</p> |
|
|
1415 |
|
|
|
1416 |
<pre class="code prettyprint">[ |
|
|
1417 |
{ |
|
|
1418 |
text: 'Is there such a thing as too much documentation?', |
|
|
1419 |
highlighted: 'Is there such a thing as too much <b class="yui3-highlight">documentation</b>?', |
|
|
1420 |
raw: { |
|
|
1421 |
"from_user": "yaypie", |
|
|
1422 |
"from_user_id": 3840589, |
|
|
1423 |
"from_user_id_str": "3840589", |
|
|
1424 |
"created_at": "Mon, 06 Dec 2010 22:58:08 +0000", |
|
|
1425 |
"id": 11917333878538241, |
|
|
1426 |
"id_str": "11917333878538241", |
|
|
1427 |
"text": "Is there such a thing as too much documentation?", |
|
|
1428 |
"profile_image_url": "http://a3.twimg.com/profile_images/994441119/ryan-profile-big_normal.jpg" |
|
|
1429 |
} |
|
|
1430 |
}, |
|
|
1431 |
|
|
|
1432 |
... |
|
|
1433 |
]</pre> |
|
|
1434 |
|
|
|
1435 |
|
|
|
1436 |
<p> |
|
|
1437 |
Using a result formatter, we can format these results as tweets in the result list instead of just displaying them as boring text. |
|
|
1438 |
</p> |
|
|
1439 |
|
|
|
1440 |
<pre class="code prettyprint">// HTML template string that will be used for each tweet result. |
|
|
1441 |
var tweetTemplate = |
|
|
1442 |
'<div class="tweet">' + |
|
|
1443 |
'<div class="hd">' + |
|
|
1444 |
'<img src="{profile_image_url}" class="photo" ' + |
|
|
1445 |
'alt="Profile photo for {from_user}">' + |
|
|
1446 |
'</div>' + |
|
|
1447 |
'<div class="bd">' + |
|
|
1448 |
'<strong class="user">{from_user}</strong>' + |
|
|
1449 |
'<span class="tweet-text">{highlighted}</span>' + |
|
|
1450 |
'</div>' + |
|
|
1451 |
'<div class="ft">{created_at}</div>' + |
|
|
1452 |
'</div>'; |
|
|
1453 |
|
|
|
1454 |
// Custom formatter for tweets. |
|
|
1455 |
function tweetFormatter(query, results) { |
|
|
1456 |
// Iterate over the array of tweet result objects and return an |
|
|
1457 |
// array of HTML strings. |
|
|
1458 |
return Y.Array.map(results, function (result) { |
|
|
1459 |
var tweet = result.raw; |
|
|
1460 |
|
|
|
1461 |
// Use string substitution to fill out the tweet template and |
|
|
1462 |
// return an HTML string for this result. |
|
|
1463 |
return Y.Lang.sub(tweetTemplate, { |
|
|
1464 |
created_at : tweet.created_at, |
|
|
1465 |
from_user : tweet.from_user, |
|
|
1466 |
highlighted : result.highlighted, |
|
|
1467 |
profile_image_url: tweet.profile_image_url |
|
|
1468 |
}); |
|
|
1469 |
}); |
|
|
1470 |
} |
|
|
1471 |
|
|
|
1472 |
// Instantiate AutoComplete using the custom formatter. |
|
|
1473 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
1474 |
resultFormatter: tweetFormatter, |
|
|
1475 |
resultHighlighter: 'phraseMatch', |
|
|
1476 |
resultListLocator: 'results', |
|
|
1477 |
resultTextLocator: 'text', |
|
|
1478 |
source: 'http://search.twitter.com/search.json?q={query}&callback={callback}' |
|
|
1479 |
});</pre> |
|
|
1480 |
|
|
|
1481 |
|
|
|
1482 |
<p> |
|
|
1483 |
Add some CSS to make things pretty, and you're good to go. |
|
|
1484 |
</p> |
|
|
1485 |
|
|
|
1486 |
<h2 id="extending-autocompletebase">Extending <code>AutoCompleteBase</code></h2> |
|
|
1487 |
|
|
|
1488 |
<p> |
|
|
1489 |
The <code>Y.AutoCompleteBase</code> class provides the core logic for a generic implementation of the autocomplete pattern, but without any UI-related functionality or implementation code. It's meant to be used as a <code>Y.Base</code> or <code>Y.Widget</code> extension and mixed into another class that builds an implementation on top of it (this is what <code>Y.AutoCompleteList</code> does). |
|
|
1490 |
</p> |
|
|
1491 |
|
|
|
1492 |
<p> |
|
|
1493 |
You can take advantage of <code>AutoCompleteBase</code> to build a customized implementation of the autocomplete pattern that doesn't necessarily have to use a traditional list-based suggestion UI. |
|
|
1494 |
</p> |
|
|
1495 |
|
|
|
1496 |
<h3 id="as-a-standalone-class">As a Standalone Class</h3> |
|
|
1497 |
|
|
|
1498 |
<p> |
|
|
1499 |
The following skeleton demonstrates how to create a standalone class that mixes in the <code>AutoCompleteBase</code> extension, making it instantiable and usable as an API, but without any user-visible interface. |
|
|
1500 |
</p> |
|
|
1501 |
|
|
|
1502 |
<pre class="code prettyprint">// Create a custom class that mixes in the AutoCompleteBase extension. |
|
|
1503 |
var MyAutoComplete = Y.Base.create('myAC', Y.Base, [Y.AutoCompleteBase], { |
|
|
1504 |
initializer: function () { |
|
|
1505 |
// The following two function calls allow AutoComplete to attach |
|
|
1506 |
// events to the inputNode and manage the inputNode's browser |
|
|
1507 |
// autocomplete functionality. |
|
|
1508 |
this._bindUIACBase(); |
|
|
1509 |
this._syncUIACBase(); |
|
|
1510 |
} |
|
|
1511 |
|
|
|
1512 |
// Custom prototype methods and properties here (optional). |
|
|
1513 |
|
|
|
1514 |
}, { |
|
|
1515 |
|
|
|
1516 |
// Custom static methods and properties here (optional). |
|
|
1517 |
|
|
|
1518 |
}); |
|
|
1519 |
|
|
|
1520 |
// Create a new instance of the custom MyAutoComplete class, with |
|
|
1521 |
// an array result source. |
|
|
1522 |
var ac = new MyAutoComplete({ |
|
|
1523 |
inputNode: '#ac-input', |
|
|
1524 |
source: ['foo', 'bar', 'baz'] |
|
|
1525 |
});</pre> |
|
|
1526 |
|
|
|
1527 |
|
|
|
1528 |
<p> |
|
|
1529 |
From an interaction standpoint, this is a little like using AutoComplete as a blank slate. It will allow you to attach AutoComplete to an input node and hook into AutoComplete's API and events so you get result retrieval, filtering, highlighting, formatting, etc., but anything beyond that is up to you. |
|
|
1530 |
</p> |
|
|
1531 |
|
|
|
1532 |
<h3 id="as-a-widget-class">As a Widget Class</h3> |
|
|
1533 |
|
|
|
1534 |
<p> |
|
|
1535 |
Building your own widget on top of <code>AutoCompleteBase</code> is easy. Just mix <code>AutoCompleteBase</code> into your widget class, then flesh it out with your own custom widget implementation. Your widget will inherit all of <code>AutoCompleteBase</code>'s methods, attributes, and events. |
|
|
1536 |
</p> |
|
|
1537 |
|
|
|
1538 |
<pre class="code prettyprint">// Create a custom widget that mixes in the AutoCompleteBase extension. |
|
|
1539 |
var MyAutoComplete = Y.Base.create('myAC', Y.Widget, [Y.AutoCompleteBase], { |
|
|
1540 |
|
|
|
1541 |
// Custom prototype methods and properties here (optional). |
|
|
1542 |
|
|
|
1543 |
}, { |
|
|
1544 |
|
|
|
1545 |
// Custom static methods and properties here (optional). |
|
|
1546 |
|
|
|
1547 |
}); |
|
|
1548 |
|
|
|
1549 |
// Create a new instance of the custom MyAutoComplete widget, with |
|
|
1550 |
// an array result source. |
|
|
1551 |
var ac = new MyAutoComplete({ |
|
|
1552 |
inputNode: '#ac-input', |
|
|
1553 |
source: ['foo', 'bar', 'baz'] |
|
|
1554 |
});</pre> |
|
|
1555 |
|
|
|
1556 |
|
|
|
1557 |
<h2 id="accessibility">Accessibility</h2> |
|
|
1558 |
|
|
|
1559 |
<p> |
|
|
1560 |
AutoComplete is designed to be accessible out of the box to users of screen readers and other assistive tools. This is accomplished via a combination of progressive enhancement and adherence to <a href="http://www.w3.org/WAI/intro/aria">WAI-ARIA</a> best practices, which help to convey the meaning and behavior of the AutoComplete widget to users who may not be able to see or interact with it in a conventional way. |
|
|
1561 |
</p> |
|
|
1562 |
|
|
|
1563 |
<h3 id="keyboard-interaction">Keyboard Interaction</h3> |
|
|
1564 |
|
|
|
1565 |
<p> |
|
|
1566 |
The AutoComplete widget supports the following keyboard commands. |
|
|
1567 |
</p> |
|
|
1568 |
|
|
|
1569 |
<table> |
|
|
1570 |
<thead> |
|
|
1571 |
<tr> |
|
|
1572 |
<th>Key</th> |
|
|
1573 |
<th>Description</th> |
|
|
1574 |
</tr> |
|
|
1575 |
</thead> |
|
|
1576 |
<tbody> |
|
|
1577 |
<tr> |
|
|
1578 |
<td style="white-space: nowrap;">Down arrow</td> |
|
|
1579 |
<td> |
|
|
1580 |
Activates the next item in the list, or displays the list if the list is currently hidden. Wraps around to the top of the list if the <code>circular</code> config attribute is set to <code>true</code> and there is no next item. |
|
|
1581 |
</td> |
|
|
1582 |
</tr> |
|
|
1583 |
|
|
|
1584 |
<tr> |
|
|
1585 |
<td style="white-space: nowrap;">Enter</td> |
|
|
1586 |
<td> |
|
|
1587 |
When the list is visible and an item is active, selects the currently active item and hides the list. |
|
|
1588 |
</td> |
|
|
1589 |
</tr> |
|
|
1590 |
|
|
|
1591 |
<tr> |
|
|
1592 |
<td style="white-space: nowrap;">Escape</td> |
|
|
1593 |
<td> |
|
|
1594 |
Hides the list if it's currently visible. |
|
|
1595 |
</td> |
|
|
1596 |
</tr> |
|
|
1597 |
|
|
|
1598 |
<tr> |
|
|
1599 |
<td style="white-space: nowrap;">Tab</td> |
|
|
1600 |
<td> |
|
|
1601 |
When the list is visible and an item is active, selects the currently active item and hides the list. |
|
|
1602 |
</td> |
|
|
1603 |
</tr> |
|
|
1604 |
|
|
|
1605 |
<tr> |
|
|
1606 |
<td style="white-space: nowrap;">Up arrow</td> |
|
|
1607 |
<td> |
|
|
1608 |
Activates the previous item in the list. Wraps around to the bottom of the list if the <code>circular</code> config attribute is set to <code>true</code> and there is no previous item. |
|
|
1609 |
</td> |
|
|
1610 |
</tr> |
|
|
1611 |
</tbody> |
|
|
1612 |
</table> |
|
|
1613 |
|
|
|
1614 |
<p> |
|
|
1615 |
Keyboard functionality is not loaded by default for users of iOS and Android-based devices, since these devices typically don't provide support for keyboard interaction. If for some reason you want to load the keyboard code for these devices, include the <code>autocomplete-list-keys</code> module in your <code>YUI().use()</code> statement. |
|
|
1616 |
</p> |
|
|
1617 |
|
|
|
1618 |
<h3 id="aria">ARIA</h3> |
|
|
1619 |
|
|
|
1620 |
<p> |
|
|
1621 |
When the AutoComplete widget is rendered, it adds the following ARIA attributes to the <code>inputNode</code>: |
|
|
1622 |
</p> |
|
|
1623 |
|
|
|
1624 |
<dl> |
|
|
1625 |
<dt><code>aria-activedescendant="<i>activeItem id</i>"</code></dt> |
|
|
1626 |
<dd> |
|
|
1627 |
Indicates that the specified result item node is the active (pre-selected) item in the list owned by this <code>inputNode</code>. This attribute is added or removed automatically when the <code>activeItem</code> changes. |
|
|
1628 |
</dd> |
|
|
1629 |
|
|
|
1630 |
<dt><code>aria-autocomplete="list"</code></dt> |
|
|
1631 |
<dd> |
|
|
1632 |
Indicates that the <code>inputNode</code> provides autocomplete suggestions in the form of a list as the user types. |
|
|
1633 |
</dd> |
|
|
1634 |
|
|
|
1635 |
<dt><code>aria-expanded="<i>true|false</i>"</code></dt> |
|
|
1636 |
<dd> |
|
|
1637 |
Indicates whether the result list is expanded (true) or collapsed (false). This attribute will be updated automatically when the list's state changes. |
|
|
1638 |
</dd> |
|
|
1639 |
|
|
|
1640 |
<dt><code>aria-owns="<i>listNode id</i>"</code></dt> |
|
|
1641 |
<dd> |
|
|
1642 |
<p> |
|
|
1643 |
Indicates that there is a parent/child relationship between the <code>inputNode</code> (which accepts user input) and the <code>listNode</code> (which displays autocomplete results related to that input). |
|
|
1644 |
</p> |
|
|
1645 |
|
|
|
1646 |
<p> |
|
|
1647 |
Not all assistive tools support the <code>aria-owns</code> attribute. For this reason, it's strongly recommended that you allow the AutoComplete widget to render its list markup inside the same container element as the input node, and immediately after the input node (this is the default behavior) rather than specifying a different parent node. |
|
|
1648 |
</p> |
|
|
1649 |
</dd> |
|
|
1650 |
</dl> |
|
|
1651 |
|
|
|
1652 |
<p> |
|
|
1653 |
The list markup, which is rendered dynamically, uses the following ARIA attributes: |
|
|
1654 |
</p> |
|
|
1655 |
|
|
|
1656 |
<dl> |
|
|
1657 |
<dt><code>aria-hidden="<i>true|false</i>"</code></dt> |
|
|
1658 |
<dd> |
|
|
1659 |
Applied to the <code>boundingBox</code>. Indicates whether the result list is hidden (true) or visible (false). This attribute will be updated automatically when the lists's state changes. |
|
|
1660 |
</dd> |
|
|
1661 |
|
|
|
1662 |
<dt><code>role="listbox"</code></dt> |
|
|
1663 |
<dd> |
|
|
1664 |
Applied to the <code>listNode</code>. Indicates that this node represents a widget that allows the user to select one or more items from a list of choices. |
|
|
1665 |
</dd> |
|
|
1666 |
|
|
|
1667 |
<dt><code>role="option"</code></dt> |
|
|
1668 |
<dd> |
|
|
1669 |
Applied to individual result item nodes inside the <code>listNode</code>. Indicates that the node represents a selectable item in a list. |
|
|
1670 |
</dd> |
|
|
1671 |
</dl> |
|
|
1672 |
|
|
|
1673 |
<h2 id="known-issues">Known Issues</h2> |
|
|
1674 |
|
|
|
1675 |
<ul> |
|
|
1676 |
<li> |
|
|
1677 |
<p> |
|
|
1678 |
The accent folding implementation used for filters and highlighters is not comprehensive, since it wouldn't be practical to serve a complete set of character data to clients via JS. The implementation used here provides basic accent folding for common alphanumeric characters only, and is not locale-aware. Whenever possible, accent folding should be done on the server, where more complete character data can be used, and not on the client. |
|
|
1679 |
</p> |
|
|
1680 |
</li> |
|
|
1681 |
|
|
|
1682 |
<li> |
|
|
1683 |
<p> |
|
|
1684 |
When used for matching, accent folding is likely to produce erroneous matches for languages in which characters with diacritics are considered different from their base characters, or where correct folding would map to other character sequences than just stripped characters. |
|
|
1685 |
</p> |
|
|
1686 |
|
|
|
1687 |
<p> |
|
|
1688 |
For example, in German "ü" is a character that's clearly different from "u" and should match "ue" instead. The word "betrügen" means "to defraud", while "betrugen" is the past tense of "to behave". The name "Müller" is expected to match "Mueller", but not "Muller". |
|
|
1689 |
</p> |
|
|
1690 |
|
|
|
1691 |
<p> |
|
|
1692 |
On the other hand, accent folding falls short for languages where different base characters are expected to match. In Japanese, for example, hiragana and katakana characters with the same pronunciation ("あ" and "ア") are commonly treated as equivalent for lookups, but accent folding treats them as different. |
|
|
1693 |
</p> |
|
|
1694 |
</li> |
|
|
1695 |
|
|
|
1696 |
<li> |
|
|
1697 |
<p> |
|
|
1698 |
The result highlighters provided by the <code>autocomplete-highlighters</code> module may introduce unwanted word breaks in Arabic, Syriac, and N'Ko scripts. This issue is being tracked in <a href="http://yuilibrary.com/projects/yui3/ticket/2529396">ticket #2529396</a>, and will be fixed in a future release. |
|
|
1699 |
</p> |
|
|
1700 |
</li> |
|
|
1701 |
</ul> |
|
|
1702 |
</div> |
|
|
1703 |
</div> |
|
|
1704 |
</div> |
|
|
1705 |
|
|
|
1706 |
<div class="yui3-u-1-4"> |
|
|
1707 |
<div class="sidebar"> |
|
|
1708 |
|
|
|
1709 |
<div id="toc" class="sidebox"> |
|
|
1710 |
<div class="hd"> |
|
|
1711 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
1712 |
</div> |
|
|
1713 |
|
|
|
1714 |
<div class="bd"> |
|
|
1715 |
<ul class="toc"> |
|
|
1716 |
<li> |
|
|
1717 |
<a href="#getting-started">Getting Started</a> |
|
|
1718 |
</li> |
|
|
1719 |
<li> |
|
|
1720 |
<a href="#using-autocomplete">Using AutoComplete</a> |
|
|
1721 |
<ul class="toc"> |
|
|
1722 |
<li> |
|
|
1723 |
<a href="#quick-start">Quick Start</a> |
|
|
1724 |
</li> |
|
|
1725 |
<li> |
|
|
1726 |
<a href="#instantiating-autocomplete">Instantiating AutoComplete</a> |
|
|
1727 |
<ul class="toc"> |
|
|
1728 |
<li> |
|
|
1729 |
<a href="#as-a-plugin">As a Plugin</a> |
|
|
1730 |
</li> |
|
|
1731 |
<li> |
|
|
1732 |
<a href="#as-a-class">As a Class</a> |
|
|
1733 |
</li> |
|
|
1734 |
</ul> |
|
|
1735 |
</li> |
|
|
1736 |
<li> |
|
|
1737 |
<a href="#dom-structure">DOM Structure</a> |
|
|
1738 |
</li> |
|
|
1739 |
<li> |
|
|
1740 |
<a href="#configuring-autocomplete">Configuring AutoComplete</a> |
|
|
1741 |
<ul class="toc"> |
|
|
1742 |
<li> |
|
|
1743 |
<a href="#base-config-attributes">Base Config Attributes</a> |
|
|
1744 |
</li> |
|
|
1745 |
<li> |
|
|
1746 |
<a href="#list-config-attributes">List Config Attributes</a> |
|
|
1747 |
</li> |
|
|
1748 |
<li> |
|
|
1749 |
<a href="#aligning-the-list">Aligning the List</a> |
|
|
1750 |
</li> |
|
|
1751 |
<li> |
|
|
1752 |
<a href="#using-query-delimiters">Using Query Delimiters</a> |
|
|
1753 |
</li> |
|
|
1754 |
</ul> |
|
|
1755 |
</li> |
|
|
1756 |
<li> |
|
|
1757 |
<a href="#autocomplete-events">AutoComplete Events</a> |
|
|
1758 |
<ul class="toc"> |
|
|
1759 |
<li> |
|
|
1760 |
<a href="#base-events">Base Events</a> |
|
|
1761 |
</li> |
|
|
1762 |
<li> |
|
|
1763 |
<a href="#list-events">List Events</a> |
|
|
1764 |
</li> |
|
|
1765 |
</ul> |
|
|
1766 |
</li> |
|
|
1767 |
<li> |
|
|
1768 |
<a href="#result-sources">Result Sources</a> |
|
|
1769 |
<ul class="toc"> |
|
|
1770 |
<li> |
|
|
1771 |
<a href="#arrayobject">Array/Object</a> |
|
|
1772 |
</li> |
|
|
1773 |
<li> |
|
|
1774 |
<a href="#datasource">DataSource</a> |
|
|
1775 |
</li> |
|
|
1776 |
<li> |
|
|
1777 |
<a href="#function">Function</a> |
|
|
1778 |
</li> |
|
|
1779 |
<li> |
|
|
1780 |
<a href="#jsonpxhr-url">JSONP/XHR URL</a> |
|
|
1781 |
</li> |
|
|
1782 |
<li> |
|
|
1783 |
<a href="#select-node"><code><select></code> Node</a> |
|
|
1784 |
</li> |
|
|
1785 |
<li> |
|
|
1786 |
<a href="#yql-query">YQL Query</a> |
|
|
1787 |
</li> |
|
|
1788 |
</ul> |
|
|
1789 |
</li> |
|
|
1790 |
<li> |
|
|
1791 |
<a href="#locating-results">Locating Results</a> |
|
|
1792 |
<ul class="toc"> |
|
|
1793 |
<li> |
|
|
1794 |
<a href="#result-list-locator">Result List Locator</a> |
|
|
1795 |
</li> |
|
|
1796 |
<li> |
|
|
1797 |
<a href="#result-text-locator">Result Text Locator</a> |
|
|
1798 |
</li> |
|
|
1799 |
</ul> |
|
|
1800 |
</li> |
|
|
1801 |
<li> |
|
|
1802 |
<a href="#filtering-results">Filtering Results</a> |
|
|
1803 |
</li> |
|
|
1804 |
<li> |
|
|
1805 |
<a href="#highlighting-results">Highlighting Results</a> |
|
|
1806 |
</li> |
|
|
1807 |
</ul> |
|
|
1808 |
</li> |
|
|
1809 |
<li> |
|
|
1810 |
<a href="#customizing-autocomplete">Customizing AutoComplete</a> |
|
|
1811 |
<ul class="toc"> |
|
|
1812 |
<li> |
|
|
1813 |
<a href="#skinning">Skinning</a> |
|
|
1814 |
</li> |
|
|
1815 |
<li> |
|
|
1816 |
<a href="#writing-result-filters">Writing Result Filters</a> |
|
|
1817 |
</li> |
|
|
1818 |
<li> |
|
|
1819 |
<a href="#writing-result-highlighters">Writing Result Highlighters</a> |
|
|
1820 |
</li> |
|
|
1821 |
<li> |
|
|
1822 |
<a href="#writing-result-formatters">Writing Result Formatters</a> |
|
|
1823 |
</li> |
|
|
1824 |
</ul> |
|
|
1825 |
</li> |
|
|
1826 |
<li> |
|
|
1827 |
<a href="#extending-autocompletebase">Extending <code>AutoCompleteBase</code></a> |
|
|
1828 |
<ul class="toc"> |
|
|
1829 |
<li> |
|
|
1830 |
<a href="#as-a-standalone-class">As a Standalone Class</a> |
|
|
1831 |
</li> |
|
|
1832 |
<li> |
|
|
1833 |
<a href="#as-a-widget-class">As a Widget Class</a> |
|
|
1834 |
</li> |
|
|
1835 |
</ul> |
|
|
1836 |
</li> |
|
|
1837 |
<li> |
|
|
1838 |
<a href="#accessibility">Accessibility</a> |
|
|
1839 |
<ul class="toc"> |
|
|
1840 |
<li> |
|
|
1841 |
<a href="#keyboard-interaction">Keyboard Interaction</a> |
|
|
1842 |
</li> |
|
|
1843 |
<li> |
|
|
1844 |
<a href="#aria">ARIA</a> |
|
|
1845 |
</li> |
|
|
1846 |
</ul> |
|
|
1847 |
</li> |
|
|
1848 |
<li> |
|
|
1849 |
<a href="#known-issues">Known Issues</a> |
|
|
1850 |
</li> |
|
|
1851 |
</ul> |
|
|
1852 |
</div> |
|
|
1853 |
</div> |
|
|
1854 |
|
|
|
1855 |
|
|
|
1856 |
|
|
|
1857 |
<div class="sidebox"> |
|
|
1858 |
<div class="hd"> |
|
|
1859 |
<h2 class="no-toc">Examples</h2> |
|
|
1860 |
</div> |
|
|
1861 |
|
|
|
1862 |
<div class="bd"> |
|
|
1863 |
<ul class="examples"> |
|
|
1864 |
|
|
|
1865 |
|
|
|
1866 |
<li data-description="How to provide autocomplete suggestions from a local array."> |
|
|
1867 |
<a href="ac-local.html">Basic Local Data</a> |
|
|
1868 |
</li> |
|
|
1869 |
|
|
|
1870 |
|
|
|
1871 |
|
|
|
1872 |
<li data-description="How to provide autocomplete suggestions using a remote JSONP source."> |
|
|
1873 |
<a href="ac-jsonp.html">Remote Data via JSONP</a> |
|
|
1874 |
</li> |
|
|
1875 |
|
|
|
1876 |
|
|
|
1877 |
|
|
|
1878 |
<li data-description="How to provide autocomplete suggestions using a YQL query source."> |
|
|
1879 |
<a href="ac-yql.html">Remote Data via YQL</a> |
|
|
1880 |
</li> |
|
|
1881 |
|
|
|
1882 |
|
|
|
1883 |
|
|
|
1884 |
<li data-description="How to provide autocomplete suggestions using a DataSource instance."> |
|
|
1885 |
<a href="ac-datasource.html">Remote Data via DataSource</a> |
|
|
1886 |
</li> |
|
|
1887 |
|
|
|
1888 |
|
|
|
1889 |
|
|
|
1890 |
<li data-description="How to implement delimited tag completion."> |
|
|
1891 |
<a href="ac-tagging.html">Tag Completion Using Query Delimiters</a> |
|
|
1892 |
</li> |
|
|
1893 |
|
|
|
1894 |
|
|
|
1895 |
|
|
|
1896 |
<li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter."> |
|
|
1897 |
<a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a> |
|
|
1898 |
</li> |
|
|
1899 |
|
|
|
1900 |
|
|
|
1901 |
|
|
|
1902 |
<li data-description="How to use autocomplete-base to filter a set of existing items on a page."> |
|
|
1903 |
<a href="ac-filter.html">Filter a Set of Existing Items on a Page</a> |
|
|
1904 |
</li> |
|
|
1905 |
|
|
|
1906 |
|
|
|
1907 |
|
|
|
1908 |
<li data-description="How to find an address using a YQL source calling Google's Geocoding Service"> |
|
|
1909 |
<a href="ac-geocode.html">Address Completion on Google's Geocoding Service</a> |
|
|
1910 |
</li> |
|
|
1911 |
|
|
|
1912 |
|
|
|
1913 |
</ul> |
|
|
1914 |
</div> |
|
|
1915 |
</div> |
|
|
1916 |
|
|
|
1917 |
|
|
|
1918 |
|
|
|
1919 |
</div> |
|
|
1920 |
</div> |
|
|
1921 |
</div> |
|
|
1922 |
</div> |
|
|
1923 |
|
|
|
1924 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
1925 |
<script>prettyPrint();</script> |
|
|
1926 |
|
|
|
1927 |
<script> |
|
|
1928 |
YUI.Env.Tests = { |
|
|
1929 |
examples: [], |
|
|
1930 |
project: '../assets', |
|
|
1931 |
assets: '../assets/autocomplete', |
|
|
1932 |
name: 'autocomplete', |
|
|
1933 |
title: 'AutoComplete', |
|
|
1934 |
newWindow: '', |
|
|
1935 |
auto: false |
|
|
1936 |
}; |
|
|
1937 |
YUI.Env.Tests.examples.push('ac-local'); |
|
|
1938 |
YUI.Env.Tests.examples.push('ac-jsonp'); |
|
|
1939 |
YUI.Env.Tests.examples.push('ac-yql'); |
|
|
1940 |
YUI.Env.Tests.examples.push('ac-datasource'); |
|
|
1941 |
YUI.Env.Tests.examples.push('ac-tagging'); |
|
|
1942 |
YUI.Env.Tests.examples.push('ac-flickr'); |
|
|
1943 |
YUI.Env.Tests.examples.push('ac-filter'); |
|
|
1944 |
YUI.Env.Tests.examples.push('ac-geocode'); |
|
|
1945 |
|
|
|
1946 |
</script> |
|
|
1947 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
1948 |
|
|
|
1949 |
|
|
|
1950 |
|
|
|
1951 |
</body> |
|
|
1952 |
</html> |