5
5
<title>Lazr-js examples: autocomplete</title>
7
<link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
8
<link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
9
<link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
11
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
12
<script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
7
<link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssreset/reset.css"></link>
8
<link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssfonts/fonts.css"></link>
9
<link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssbase/base.css"></link>
12
<script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
13
<script type="text/javascript" src="../../build/yui/current/build/widget/widget-position-debug.js"></script>
14
<script type="text/javascript" src="../../build/yui/current/build/widget/widget-position-ext-debug.js"></script>
15
<script type="text/javascript" src="../../build/lazr/lazr.js"></script>
16
<script type="text/javascript" src="../../build/autocomplete/autocomplete.js"></script>
13
17
<script type="text/javascript">
14
var LAZR_YUI_CONFIG = {
17
modules: LAZR_MODULES,
18
insertBefore: "style-overrides",
21
var LP = YUI(LAZR_YUI_CONFIG);
62
"United Arab Emirates",
101
"Dominican Republic",
116
"Trinidad and Tobago",
127
"Bosnia and Herzegovina",
143
"Democratic Republic of the Congo",
148
"Republic of the Congo",
150
"Republic of Macedonia",
163
"Palestinian flag West Bank and Gaza",
192
"Central African Republic",
201
"Antigua and Barbuda",
209
"British Virgin Islands",
213
"Northern Mariana Islands",
215
"Saint Vincent and the Grenadines",
216
"Saint Kitts and Nevis",
230
"S o Tom and Pr ncipe",
20
base: '../../build/yui/current/build/',
63
"United Arab Emirates",
102
"Dominican Republic",
117
"Trinidad and Tobago",
128
"Bosnia and Herzegovina",
144
"Democratic Republic of the Congo",
149
"Republic of the Congo",
151
"Republic of Macedonia",
164
"Palestinian flag West Bank and Gaza",
193
"Central African Republic",
202
"Antigua and Barbuda",
210
"British Virgin Islands",
214
"Northern Mariana Islands",
216
"Saint Vincent and the Grenadines",
217
"Saint Kitts and Nevis",
231
"S o Tom and Pr ncipe",
238
<style id="style-overrides" type="text/css">
240
background-color: #ecf5fa;
241
border: 1px solid #8899dd;
245
#example label { display: block; line-height: 2em; font-weight: bold; }
246
#example input { margin-bottom: 1em; }
247
#example h4 { font-weight: normal; }
248
#example #keys li { line-height: 2em; }
250
background-color: #eee;
251
border: 1px solid #bbb;
241
We need to include individual css files because some of them have
242
relative paths to images.
244
<link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
245
<link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"></link>
246
<link type="text/css" rel="stylesheet" href="../../build/autocomplete/assets/skins/sam/autocomplete.css"></link>
248
<style type="text/css">
250
background-color: #ecf5fa;
251
border: 1px solid #8899dd;
255
#example label { display: block; line-height: 2em; font-weight: bold; }
256
#example input { margin-bottom: 1em; }
257
#example h4 { font-weight: normal; }
258
#example #keys li { line-height: 2em; }
260
background-color: #eee;
261
border: 1px solid #bbb;
258
<body class="yui3-skin-sam">
260
<h1>A Simple auto-complete Widget</h1>
262
<h2>Demonstration</h2>
264
<label for="ac-input">Enter a country name:</label>
265
<input id="ac-input" type="text" value="" />
266
<h4>Some useful keyboard shortcuts:</h4>
268
<li><kbd>Tab</kbd> or <kbd>Enter</kbd> completes the current input.</li>
269
<li><kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> navigate the completions list</li>
270
<li><kbd>Esc</kbd> closes the completion list</li>
273
<script type="text/javascript">
274
LP.use('node', 'event', 'dump', 'lazr.autocomplete', function(Y) {
268
<body class="yui-skin-sam">
270
<h1>A Simple auto-complete Widget</h1>
272
<h2>Demonstration</h2>
274
<label for="ac-input">Enter a country name:</label>
275
<input id="ac-input" type="text" value="" />
276
<h4>Some useful keyboard shortcuts:</h4>
278
<li><kbd>Tab</kbd> or <kbd>Enter</kbd> completes the current input.</li>
279
<li><kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> navigate the completions list</li>
280
<li><kbd>Esc</kbd> closes the completion list</li>
283
<script type="text/javascript">
284
LP.use('node', 'event', 'dump', 'lazr.autocomplete', function(Y) {
276
286
function log(msg) {
277
287
Y.log(msg, 'info');