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