autocomplete.html revision 99ae4cf94b18f24d35db8c5ffed25fdf304accf4
286N/A<!DOCTYPE html>
286N/A<html>
286N/A<head>
286N/A <meta charset="utf-8">
286N/A <title>AutoComplete manual test</title>
286N/A <link rel="stylesheet" href="/assets/test-console.css">
286N/A <style>
286N/A body { width: 60%; }
286N/A
286N/A fieldset {
286N/A border: 1px solid #afafaf;
286N/A margin-bottom: 1em;
286N/A }
286N/A
286N/A fieldset label { margin-right: 0.5em; }
286N/A
286N/A #ac { width: 17em; }
286N/A #log { margin-top: 4em; }
286N/A </style>
286N/A</head>
286N/A<body class="yui3-skin-sam">
286N/A
286N/A<h1>AutoComplete manual test</h1>
286N/A
286N/A<form>
286N/A <p>
286N/A <label for="ac">Type things here! Try the name of a US state.</label><br>
286N/A <input type="text" id="ac">
286N/A </p>
286N/A
286N/A <fieldset id="data-sources">
286N/A <legend>DataSource</legend>
286N/A <div>
286N/A <input type="radio" id="ds-none" name="ds" value="none">
286N/A <label for="ds-none">None</label>
286N/A
286N/A <input type="radio" id="ds-local" name="ds" value="local" checked="checked">
286N/A <label for="ds-local">Local</label>
286N/A
286N/A <input type="radio" id="ds-remote" name="ds" value="remote">
286N/A <label for="ds-remote">Remote (JSONP)</label>
286N/A </div>
286N/A </fieldset>
286N/A
286N/A <fieldset id="filters">
286N/A <legend>Result Filters</legend>
286N/A <div>
286N/A </div>
286N/A </fieldset>
286N/A
286N/A <fieldset id="highlighters">
286N/A <legend>Result Highlighters</legend>
286N/A <div>
286N/A <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
286N/A <label for="highlighter_none">None</label>
286N/A </div>
286N/A </fieldset>
286N/A</form>
286N/A
286N/A<div id="log"></div>
286N/A
286N/A<script src="/assets/test-data.js"></script>
<script src="/build/yui/yui.js"></script>
<script src="/unicode/js/unicode-data-wordbreak.js"></script>
<script src="/unicode/js/unicode-wordbreak.js"></script>
<script src="/escape/js/escape.js"></script>
<script src="/highlight/js/highlight.js"></script>
<script src="/js/autocomplete-base.js"></script>
<script src="/js/autocomplete-filters.js"></script>
<script src="/js/autocomplete-highlighters.js"></script>
<script>
var Y = YUI({
filter: 'raw',
filters: {
'autocomplete': 'debug'
},
useBrowserConsole: false
}).use(
'autocomplete-base',
'autocomplete-filters',
'autocomplete-highlighters',
'console-filters',
'datasource-get',
'datasource-jsonschema',
'datasource-local',
'dump',
'event-delegate',
function (Y) {
// -- Console setup ------------------------------------------------------------
new Y.Console({
height: '400px',
width: '35%'
}).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
// -- AutoComplete setup -------------------------------------------------------
var dataSourceLocal = new Y.DataSource.Local({
source: ExampleData.arrayStates
}),
dataSourceRemote = new Y.DataSource.Get({
source: 'http://query.yahooapis.com/v1/public/yql?format=json&'
}),
autoComplete = new Y.AutoComplete({inputNode: '#ac'});
dataSourceRemote.plug({
fn: Y.Plugin.DataSourceJSONSchema,
cfg: {
schema: {
resultListLocator: 'query.results.Result'
}
}
});
autoComplete.on('results', function (e) {
Y.log('results: ' + Y.dump(e.results), 'info', 'autocomplete');
});
// For easier debugging.
Y.autoComplete = autoComplete;
// -- UI stuff -----------------------------------------------------------------
var filtersDiv = Y.one('#filters>div'),
highlightersDiv = Y.one('#highlighters>div');
// Create filter checkboxes.
Y.Object.each(Y.AutoComplete.Filters, function (filter, name) {
if (name.indexOf('_') === 0) {
return;
}
filtersDiv.append(
'<input type="checkbox" class="filter" id="filter_' + name + '" value="' + name + '"' + (name === 'startsWith' ? ' checked="checked"' : '') + '>' +
'<label for="filter_' + name + '">' + name + '</label>'
);
});
// Create highlighter radio buttons.
Y.Object.each(Y.AutoComplete.Highlighters, function (highlighter, name) {
if (name.indexOf('_') === 0) {
return;
}
highlightersDiv.append(
'<input type="radio" class="highlighter" name="highlighter" id="highlighter_' + name + '" value="' + name + '">' +
'<label for="highlighter_' + name + '">' + name + '</label>'
);
});
// Handle clicks on datasource radio buttons.
Y.delegate('click', function (e) {
switch (e.currentTarget.get('value')) {
case 'none':
useNone();
break;
case 'local':
useLocal();
break;
case 'remote':
useRemote();
break;
}
}, '#data-sources', 'input[type="radio"]');
// Handle clicks on filters.
Y.delegate('click', setFilters, '#filters', 'input[type="checkbox"]');
// Handle clicks on highlighters.
Y.delegate('click', setHighlighter, '#highlighters', 'input[type="radio"]');
useLocal();
setFilters();
setHighlighter();
autoComplete.get('inputNode').focus();
// -- UI functions -------------------------------------------------------------
function setFilters() {
var filters = [],
filterNames = [];
Y.all('#filters input.filter').each(function (input) {
if (input.get('checked')) {
filterNames.push(input.get('value'));
}
});
Y.Array.each(filterNames, function (name) {
filters.push(Y.AutoComplete.Filters[name]);
});
autoComplete.set('resultFilters', filters);
}
function setHighlighter() {
Y.all('#highlighters input.highlighter').some(function (input) {
var name;
if (input.get('checked')) {
name = input.get('value');
autoComplete.set('resultHighlighter', name === 'none' ? null :
Y.AutoComplete.Highlighters[name]);
return true;
}
});
}
// -- DataSource functions -----------------------------------------------------
function useLocal() {
Y.log('using local data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
autoComplete.set('dataSource', dataSourceLocal);
autoComplete.set('requestTemplate', function (q) { return q; });
}
function useNone() {
Y.log('using no data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
autoComplete.set('dataSource', null);
}
function useRemote() {
Y.log('using remote data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
autoComplete.set('dataSource', dataSourceRemote);
autoComplete.set('requestTemplate', 'q=' + encodeURIComponent('select * from search.suggest where query="') + '{query}' + encodeURIComponent('"'));
}
});
</script>
</body>
</html>