autocomplete-prerelease-example.html revision e94d811620f0a7011e8b8568f4694e8a2e0f20f5
1280N/A<!DOCTYPE html>
4511N/A<html>
1280N/A<head>
1280N/A <meta charset="utf-8">
1280N/A <title>AutoComplete prerelease example</title>
1280N/A <style>
2362N/A html {
1280N/A background: #fff;
2362N/A color: #333;
1280N/A font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
1280N/A font-size: 13px;
1280N/A }
1280N/A
1280N/A #ac-input {
1280N/A margin: 5px 0 10px;
1280N/A width: 300px;
1280N/A }
1280N/A </style>
1280N/A</head>
1280N/A<body class="yui3-skin-sam">
2362N/A
2362N/A<h1>AutoComplete prerelease example</h1>
2362N/A
1280N/A<form id="ac-form">
1280N/A <div id="ac">
1280N/A <label for="ac-input">Yahoo! Search:</label><br>
1280N/A <input type="text" id="ac-input">
1280N/A <div id="ac-list"></div>
1280N/A </div>
1280N/A</form>
1280N/A
1280N/A<!--
1280N/Afuji.jetpants.com provides a combo-hosted version of the latest YUI3 git master
1280N/Acode, but it's for testing only. Please don't use it for production, as it is
1280N/Anot a CDN and will occasionally be unavailable.
1280N/A-->
1280N/A<script src="http://fuji.jetpants.com/yui/yui3/combo?build/yui/yui-min.js&amp;build/loader/loader-min.js"></script>
1280N/A<script>
1280N/Avar Y = YUI({
1280N/A comboBase: 'http://fuji.jetpants.com/yui/yui3/combo?',
1280N/A combine : true,
1280N/A root : 'build/'
1280N/A}).use(
1280N/A 'autocomplete',
1280N/A 'autocomplete-highlighters',
1280N/A 'datasource-get',
1280N/A 'datasource-jsonschema',
1280N/Afunction (Y) {
1280N/A
1280N/Avar autoComplete = new Y.AutoCompleteList({
1280N/A boundingBox: '#ac-list',
1280N/A inputNode: '#ac-input',
1280N/A requestTemplate: 'select%20*%20from%20search.suggest%20where%20query%3D%22{query}%22',
1280N/A resultHighlighter: Y.AutoCompleteHighlighters.phraseMatch,
1280N/A render: true
1280N/A }),
1869N/A
1869N/A dataSourceSearch = new Y.DataSource.Get({
1869N/A source: 'http://query.yahooapis.com/v1/public/yql?format=json&q='
1280N/A });
1280N/A
1280N/AdataSourceSearch.plug({
1280N/A fn: Y.Plugin.DataSourceJSONSchema,
1280N/A cfg: {
1280N/A schema: {
1280N/A resultListLocator: 'query.results.Result'
1280N/A }
1280N/A }
1280N/A});
1280N/A
1280N/AautoComplete.on('select', function (e) {
1280N/A Y.config.win.location = 'http://search.yahoo.com/search?p=' +
1280N/A encodeURIComponent(e.result.text);
1280N/A});
1280N/A
1280N/AautoComplete.set('dataSource', dataSourceSearch);
1280N/AautoComplete.get('inputNode').focus();
1280N/A
1280N/A// For easier console tinkering.
1280N/AY.ac = autoComplete;
1280N/A
1280N/A});
1280N/A</script>
1280N/A
1280N/A</body>
1280N/A</html>
1280N/A