autocomplete-prerelease-example.html revision c1d6f8ae693649c44677dcc578e9b1143b99b5f7
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
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<form id="ac-form">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <div id="ac">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <label for="ac-input">Yahoo! Search:</label><br>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <input type="text" id="ac-input">
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove <div id="ac-list"></div>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove </div>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</form>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove<script src="http://fuji.jetpants.com/yui/yui3/combo?build/yui/yui-min.js&amp;build/loader/loader-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/'
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove}).use(
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove 'autocomplete',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove 'autocomplete-highlighters',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove 'datasource-get',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove 'datasource-jsonschema',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grovefunction (Y) {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grovevar autoComplete = new Y.AutoCompleteList({
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove boundingBox: '#ac-list',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove inputNode: '#ac-input',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove requestTemplate: 'select%20*%20from%20search.suggest%20where%20query%3D%22{query}%22',
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove resultHighlighter: Y.AutoCompleteHighlighters.phraseMatch,
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove render: true
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove }),
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove dataSourceSearch = new Y.DataSource.Get({
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove source: 'http://query.yahooapis.com/v1/public/yql?format=json&q='
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove });
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan GrovedataSourceSearch.plug({
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove fn: Y.Plugin.DataSourceJSONSchema,
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove cfg: {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove schema: {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove resultListLocator: 'query.results.Result'
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove }
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove }
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan GroveautoComplete.on('select', function (e) {
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove Y.config.win.location = 'http://search.yahoo.com/search?p=' +
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove encodeURIComponent(e.result.text);
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan GroveautoComplete.set('dataSource', dataSourceSearch);
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan GroveautoComplete.get('inputNode').focus();
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove// For easier console tinkering.
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan GroveY.ac = autoComplete;
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove});
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</script>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</body>
c1d6f8ae693649c44677dcc578e9b1143b99b5f7Ryan Grove</html>