autocomplete-prerelease-example.html revision 8a473112ab5d8c74fb79ef0553ba5f038fe3bde3
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
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan 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.
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove</p>
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove<form id="ac-form" action="http://search.yahoo.com/search" method="get">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <div id="ac">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <label for="ac-input">Yahoo! Search:</label><br>
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove <input type="text" id="ac-input" name="p">
2783b7256f25fd2bd470f63cdd9b09ff774678afRyan Grove <input type="submit" value="Search">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <div id="ac-list"></div>
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-->
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<script src="http://fuji.jetpants.com/yui/yui3/combo?build/yui/yui-min.js&amp;build/loader/loader-min.js"></script>
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan Grove<!-- <script src="/build/yui/yui-min.js"></script> -->
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<script>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grovevar Y = YUI({
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove comboBase: 'http://fuji.jetpants.com/yui/yui3/combo?',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove combine : true,
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove root : 'build/'
8a473112ab5d8c74fb79ef0553ba5f038fe3bde3Ryan Grove}).use('autocomplete', 'autocomplete-highlighters', 'yql', function (Y) {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan Grove// Assigning the instance to Y.ac for easier console tinkering.
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan GroveY.ac = new Y.AutoCompleteList({
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan Grove boundingBox : '#ac-list',
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan Grove inputNode : '#ac-input',
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan Grove render : true,
b1ec001afbb5c5d84675023047109f2a42748bd0Ryan Grove resultHighlighter: Y.AutoCompleteHighlighters.phraseMatch,
8a473112ab5d8c74fb79ef0553ba5f038fe3bde3Ryan Grove source : 'select * from search.suggest where query="{query}"'
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</script>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</body>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</html>