tests/manual/autocomplete-prerelease-example.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<!DOCTYPE html>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<html>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<head>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    <meta charset="utf-8">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    <title>AutoComplete prerelease example</title>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    <style>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    html {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove        background: #fff;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove        color: #333;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove        font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove        font-size: 13px;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    }
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    #ac-input {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove        margin: 5px 0 10px;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove        width: 300px;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    }
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    </style>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</head>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<body class="yui3-skin-sam">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
fe1ddbe42962c92508fc71d32ee076607d330e56Ryan Grove<!-- <h1>AutoComplete prerelease example</h1>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove<p>
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan GroveThis is a simple example of an autocomplete list widget that displays
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grovesuggestions from Yahoo! Search. Begin typing a query in the input field below to
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grovesee suggestions.
fe1ddbe42962c92508fc71d32ee076607d330e56Ryan Grove</p> -->
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove<form id="ac-form" action="http://search.yahoo.com/search" method="get">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    <div id="ac">
fe1ddbe42962c92508fc71d32ee076607d330e56Ryan Grove        <label for="ac-input">Search:</label><br>
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove        <input type="text" id="ac-input" name="p">
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove        <input type="submit" value="Search">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove    </div>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</form>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
e94d811620f0a7011e8b8568f4694e8a2e0f20f5Ryan Grove<!--
e94d811620f0a7011e8b8568f4694e8a2e0f20f5Ryan Grovefuji.jetpants.com provides a combo-hosted version of the latest YUI3 git master
e94d811620f0a7011e8b8568f4694e8a2e0f20f5Ryan Grovecode, but it's for testing only. Please don't use it for production, as it is
e94d811620f0a7011e8b8568f4694e8a2e0f20f5Ryan Grovenot a CDN and will occasionally be unavailable.
e94d811620f0a7011e8b8568f4694e8a2e0f20f5Ryan Grove-->
f94ade3d86f8002647707af993d80f794a7f0164Ryan Grove<script src="http://fuji.jetpants.com/yui/combo/yui3-dev?build/yui/yui-min.js&amp;build/loader/loader-min.js"></script>
f94ade3d86f8002647707af993d80f794a7f0164Ryan Grove<!-- <script src="/build/yui/yui-min.js"></script> -->
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<script>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grovevar Y = YUI({
f94ade3d86f8002647707af993d80f794a7f0164Ryan Grove    comboBase: 'http://fuji.jetpants.com/yui/combo/yui3-dev?',
f94ade3d86f8002647707af993d80f794a7f0164Ryan Grove    combine  : true,
f94ade3d86f8002647707af993d80f794a7f0164Ryan Grove    root     : 'build/'
42d805f1e61a84164fd1d341180de7477d99e596Ryan Grove}).use('autocomplete', 'autocomplete-highlighters', function (Y) {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
42d805f1e61a84164fd1d341180de7477d99e596Ryan GroveY.one('#ac-input').plug(Y.Plugin.AutoComplete, {
fe1ddbe42962c92508fc71d32ee076607d330e56Ryan Grove    resultHighlighter: 'phraseMatch',
8a473112ab5d8c74fb79ef0553ba5f038fe3bde3Ryan Grove    source           : 'select * from search.suggest where query="{query}"'
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
42d805f1e61a84164fd1d341180de7477d99e596Ryan Grove// For easier console tinkering.
42d805f1e61a84164fd1d341180de7477d99e596Ryan GroveY.ac = Y.one('#ac-input').ac;
42d805f1e61a84164fd1d341180de7477d99e596Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</script>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</body>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</html>