|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: Basic Local Data</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 |
|
|
|
24 |
<h1>Example: Basic Local Data</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><div class="intro"> |
|
|
29 |
<p> |
|
|
30 |
This example demonstrates how to provide autocomplete suggestions from local data in an array. Since lookups are performed entirely on the client, this example doesn't require any remote requests, and suggestions are displayed almost instantly. |
|
|
31 |
</p> |
|
|
32 |
</div> |
|
|
33 |
|
|
|
34 |
<div class="example"> |
|
|
35 |
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
36 |
<label for="ac-input">Enter the name of a US state:</label><br> |
|
|
37 |
<input id="ac-input" type="text"> |
|
|
38 |
</div> |
|
|
39 |
|
|
|
40 |
<script> |
|
|
41 |
YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) { |
|
|
42 |
var states = [ |
|
|
43 |
'Alabama', |
|
|
44 |
'Alaska', |
|
|
45 |
'Arizona', |
|
|
46 |
'Arkansas', |
|
|
47 |
'California', |
|
|
48 |
'Colorado', |
|
|
49 |
'Connecticut', |
|
|
50 |
'Delaware', |
|
|
51 |
'Florida', |
|
|
52 |
'Georgia', |
|
|
53 |
'Hawaii', |
|
|
54 |
'Idaho', |
|
|
55 |
'Illinois', |
|
|
56 |
'Indiana', |
|
|
57 |
'Iowa', |
|
|
58 |
'Kansas', |
|
|
59 |
'Kentucky', |
|
|
60 |
'Louisiana', |
|
|
61 |
'Maine', |
|
|
62 |
'Maryland', |
|
|
63 |
'Massachusetts', |
|
|
64 |
'Michigan', |
|
|
65 |
'Minnesota', |
|
|
66 |
'Mississippi', |
|
|
67 |
'Missouri', |
|
|
68 |
'Montana', |
|
|
69 |
'Nebraska', |
|
|
70 |
'Nevada', |
|
|
71 |
'New Hampshire', |
|
|
72 |
'New Jersey', |
|
|
73 |
'New Mexico', |
|
|
74 |
'New York', |
|
|
75 |
'North Dakota', |
|
|
76 |
'North Carolina', |
|
|
77 |
'Ohio', |
|
|
78 |
'Oklahoma', |
|
|
79 |
'Oregon', |
|
|
80 |
'Pennsylvania', |
|
|
81 |
'Rhode Island', |
|
|
82 |
'South Carolina', |
|
|
83 |
'South Dakota', |
|
|
84 |
'Tennessee', |
|
|
85 |
'Texas', |
|
|
86 |
'Utah', |
|
|
87 |
'Vermont', |
|
|
88 |
'Virginia', |
|
|
89 |
'Washington', |
|
|
90 |
'West Virginia', |
|
|
91 |
'Wisconsin', |
|
|
92 |
'Wyoming' |
|
|
93 |
]; |
|
|
94 |
|
|
|
95 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
96 |
resultFilters : 'phraseMatch', |
|
|
97 |
resultHighlighter: 'phraseMatch', |
|
|
98 |
source : states |
|
|
99 |
}); |
|
|
100 |
}); |
|
|
101 |
</script> |
|
|
102 |
|
|
|
103 |
</div> |
|
|
104 |
|
|
|
105 |
<h2>HTML</h2> |
|
|
106 |
<p> |
|
|
107 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
108 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
109 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
110 |
</p> |
|
|
111 |
<pre class="code prettyprint"><div id="demo" class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
112 |
<label for="ac-input">Enter the name of a US state:</label><br> |
|
|
113 |
<input id="ac-input" type="text"> |
|
|
114 |
</div></pre> |
|
|
115 |
|
|
|
116 |
|
|
|
117 |
<h2>JavaScript</h2> |
|
|
118 |
|
|
|
119 |
<h3>Data</h3> |
|
|
120 |
|
|
|
121 |
<pre class="code prettyprint">var states = [ |
|
|
122 |
'Alabama', |
|
|
123 |
'Alaska', |
|
|
124 |
'Arizona', |
|
|
125 |
'Arkansas', |
|
|
126 |
'California', |
|
|
127 |
... |
|
|
128 |
];</pre> |
|
|
129 |
|
|
|
130 |
|
|
|
131 |
<h3>Implementation</h3> |
|
|
132 |
|
|
|
133 |
<pre class="code prettyprint">YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) { |
|
|
134 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
135 |
resultFilters : 'phraseMatch', |
|
|
136 |
resultHighlighter: 'phraseMatch', |
|
|
137 |
source : states |
|
|
138 |
}); |
|
|
139 |
});</pre> |
|
|
140 |
|
|
|
141 |
|
|
|
142 |
<h2>Complete Example Source</h2> |
|
|
143 |
|
|
|
144 |
<pre class="code prettyprint"><div id="demo" class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
145 |
<label for="ac-input">Enter the name of a US state:</label><br> |
|
|
146 |
<input id="ac-input" type="text"> |
|
|
147 |
</div> |
|
|
148 |
|
|
|
149 |
<script> |
|
|
150 |
YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) { |
|
|
151 |
var states = [ |
|
|
152 |
'Alabama', |
|
|
153 |
'Alaska', |
|
|
154 |
'Arizona', |
|
|
155 |
'Arkansas', |
|
|
156 |
'California', |
|
|
157 |
'Colorado', |
|
|
158 |
'Connecticut', |
|
|
159 |
'Delaware', |
|
|
160 |
'Florida', |
|
|
161 |
'Georgia', |
|
|
162 |
'Hawaii', |
|
|
163 |
'Idaho', |
|
|
164 |
'Illinois', |
|
|
165 |
'Indiana', |
|
|
166 |
'Iowa', |
|
|
167 |
'Kansas', |
|
|
168 |
'Kentucky', |
|
|
169 |
'Louisiana', |
|
|
170 |
'Maine', |
|
|
171 |
'Maryland', |
|
|
172 |
'Massachusetts', |
|
|
173 |
'Michigan', |
|
|
174 |
'Minnesota', |
|
|
175 |
'Mississippi', |
|
|
176 |
'Missouri', |
|
|
177 |
'Montana', |
|
|
178 |
'Nebraska', |
|
|
179 |
'Nevada', |
|
|
180 |
'New Hampshire', |
|
|
181 |
'New Jersey', |
|
|
182 |
'New Mexico', |
|
|
183 |
'New York', |
|
|
184 |
'North Dakota', |
|
|
185 |
'North Carolina', |
|
|
186 |
'Ohio', |
|
|
187 |
'Oklahoma', |
|
|
188 |
'Oregon', |
|
|
189 |
'Pennsylvania', |
|
|
190 |
'Rhode Island', |
|
|
191 |
'South Carolina', |
|
|
192 |
'South Dakota', |
|
|
193 |
'Tennessee', |
|
|
194 |
'Texas', |
|
|
195 |
'Utah', |
|
|
196 |
'Vermont', |
|
|
197 |
'Virginia', |
|
|
198 |
'Washington', |
|
|
199 |
'West Virginia', |
|
|
200 |
'Wisconsin', |
|
|
201 |
'Wyoming' |
|
|
202 |
]; |
|
|
203 |
|
|
|
204 |
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, { |
|
|
205 |
resultFilters : 'phraseMatch', |
|
|
206 |
resultHighlighter: 'phraseMatch', |
|
|
207 |
source : states |
|
|
208 |
}); |
|
|
209 |
}); |
|
|
210 |
</script></pre> |
|
|
211 |
|
|
|
212 |
</div> |
|
|
213 |
</div> |
|
|
214 |
</div> |
|
|
215 |
|
|
|
216 |
<div class="yui3-u-1-4"> |
|
|
217 |
<div class="sidebar"> |
|
|
218 |
|
|
|
219 |
|
|
|
220 |
|
|
|
221 |
<div class="sidebox"> |
|
|
222 |
<div class="hd"> |
|
|
223 |
<h2 class="no-toc">Examples</h2> |
|
|
224 |
</div> |
|
|
225 |
|
|
|
226 |
<div class="bd"> |
|
|
227 |
<ul class="examples"> |
|
|
228 |
|
|
|
229 |
|
|
|
230 |
<li data-description="How to provide autocomplete suggestions from a local array."> |
|
|
231 |
<a href="ac-local.html">Basic Local Data</a> |
|
|
232 |
</li> |
|
|
233 |
|
|
|
234 |
|
|
|
235 |
|
|
|
236 |
<li data-description="How to provide autocomplete suggestions using a remote JSONP source."> |
|
|
237 |
<a href="ac-jsonp.html">Remote Data via JSONP</a> |
|
|
238 |
</li> |
|
|
239 |
|
|
|
240 |
|
|
|
241 |
|
|
|
242 |
<li data-description="How to provide autocomplete suggestions using a YQL query source."> |
|
|
243 |
<a href="ac-yql.html">Remote Data via YQL</a> |
|
|
244 |
</li> |
|
|
245 |
|
|
|
246 |
|
|
|
247 |
|
|
|
248 |
<li data-description="How to provide autocomplete suggestions using a DataSource instance."> |
|
|
249 |
<a href="ac-datasource.html">Remote Data via DataSource</a> |
|
|
250 |
</li> |
|
|
251 |
|
|
|
252 |
|
|
|
253 |
|
|
|
254 |
<li data-description="How to implement delimited tag completion."> |
|
|
255 |
<a href="ac-tagging.html">Tag Completion Using Query Delimiters</a> |
|
|
256 |
</li> |
|
|
257 |
|
|
|
258 |
|
|
|
259 |
|
|
|
260 |
<li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter."> |
|
|
261 |
<a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a> |
|
|
262 |
</li> |
|
|
263 |
|
|
|
264 |
|
|
|
265 |
|
|
|
266 |
<li data-description="How to use autocomplete-base to filter a set of existing items on a page."> |
|
|
267 |
<a href="ac-filter.html">Filter a Set of Existing Items on a Page</a> |
|
|
268 |
</li> |
|
|
269 |
|
|
|
270 |
|
|
|
271 |
|
|
|
272 |
<li data-description="How to find an address using a YQL source calling Google's Geocoding Service"> |
|
|
273 |
<a href="ac-geocode.html">Address Completion on Google's Geocoding Service</a> |
|
|
274 |
</li> |
|
|
275 |
|
|
|
276 |
|
|
|
277 |
</ul> |
|
|
278 |
</div> |
|
|
279 |
</div> |
|
|
280 |
|
|
|
281 |
|
|
|
282 |
|
|
|
283 |
</div> |
|
|
284 |
</div> |
|
|
285 |
</div> |
|
|
286 |
</div> |
|
|
287 |
|
|
|
288 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
289 |
<script>prettyPrint();</script> |
|
|
290 |
|
|
|
291 |
<script> |
|
|
292 |
YUI.Env.Tests = { |
|
|
293 |
examples: [], |
|
|
294 |
project: '../assets', |
|
|
295 |
assets: '../assets/autocomplete', |
|
|
296 |
name: 'ac-local', |
|
|
297 |
title: 'Basic Local Data', |
|
|
298 |
newWindow: '', |
|
|
299 |
auto: false |
|
|
300 |
}; |
|
|
301 |
YUI.Env.Tests.examples.push('ac-local'); |
|
|
302 |
YUI.Env.Tests.examples.push('ac-jsonp'); |
|
|
303 |
YUI.Env.Tests.examples.push('ac-yql'); |
|
|
304 |
YUI.Env.Tests.examples.push('ac-datasource'); |
|
|
305 |
YUI.Env.Tests.examples.push('ac-tagging'); |
|
|
306 |
YUI.Env.Tests.examples.push('ac-flickr'); |
|
|
307 |
YUI.Env.Tests.examples.push('ac-filter'); |
|
|
308 |
YUI.Env.Tests.examples.push('ac-geocode'); |
|
|
309 |
|
|
|
310 |
</script> |
|
|
311 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
312 |
|
|
|
313 |
|
|
|
314 |
|
|
|
315 |
</body> |
|
|
316 |
</html> |