autocomplete.html revision be88250ca854b49860633d7f4185e4aa485f61a5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AutoComplete manual test</title>
<style>
body { width: 60%; }
fieldset {
border: 1px solid #afafaf;
margin-bottom: 1em;
}
fieldset label { margin-right: 0.5em; }
#ac-input { width: 17em; }
#log { margin-top: 4em; }
</style>
</head>
<body class="yui3-skin-sam">
<h1>AutoComplete manual test</h1>
<form>
<div id="ac">
<label for="ac-input">Type things here! Try the name of a US state.</label><br>
<input type="text" id="ac-input">
</div>
<fieldset id="data-sources">
<legend>DataSource</legend>
<div>
<input type="radio" id="ds-none" name="ds" value="none">
<label for="ds-none">None</label>
<input type="radio" id="ds-local" name="ds" value="local" checked="checked">
<label for="ds-local">Local</label>
<input type="radio" id="ds-flickr" name="ds" value="flickr">
<label for="ds-flickr">Remote (Flickr)</label>
<input type="radio" id="ds-search" name="ds" value="search">
<label for="ds-search">Remote (Y! Search)</label>
</div>
</fieldset>
<fieldset id="filters">
<legend>Result Filters</legend>
<div></div>
</fieldset>
<fieldset id="highlighters">
<legend>Result Highlighters</legend>
<div>
<input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
<label for="highlighter_none">None</label>
</div>
</fieldset>
</form>
<div id="log"></div>
<script>
// Note: if you're viewing source to learn how to use AutoComplete, you should
// be aware that this is a much more complex example than you'd ever be likely
// to implement in a real-world use case, since this manual test page tries to
// cover the majority of AutoComplete's available functionality.
//
// Please don't let this scare you off!
var Y = YUI({
filter: 'raw',
filters: {
'autocomplete-base': 'debug',
'autocomplete': 'debug'
},
useBrowserConsole: false
}).use(
'autocomplete-base',
'autocomplete-filters',
'autocomplete-highlighters',
'autocomplete-list',
'console',
'datasource-get',
'datasource-jsonschema',
'datasource-local',
'dump',
'event-delegate',
function (Y) {
// -- Console setup ------------------------------------------------------------
new Y.Console({
height: '400px',
width: '35%'
}).render('#log');
// -- AutoComplete setup -------------------------------------------------------
var autoComplete = new Y.AutoCompleteList({srcNode: '#ac'}),
dataSourceFlickr = new Y.DataSource.Get({
}),
dataSourceLocal = new Y.DataSource.Local({
source: ExampleData.arrayStates
}),
dataSourceSearch = new Y.DataSource.Get({
});
// For easier debugging.
Y.autoComplete = autoComplete;
autoComplete.on('results', function (e) {
});
// -- DataSource config --------------------------------------------------------
cfg: {
schema: {
resultListLocator: 'query.results.photo'
}
}
});
cfg: {
schema: {
}
}
});
// -- UI stuff -----------------------------------------------------------------
var filtersDiv = Y.one('#filters>div'),
highlightersDiv = Y.one('#highlighters>div');
// Create filter checkboxes.
Y.Object.each(Y.AutoCompleteFilters, function (filter, name) {
if (name.indexOf('_') === 0) {
return;
}
'<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.AutoCompleteHighlighters, function (highlighter, name) {
if (name.indexOf('_') === 0) {
return;
}
'<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 'flickr':
useFlickr();
break;
case 'search':
useSearch();
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 flickrFormatter(query, results) {
return Y.Array.map(results, function (result) {
return result.title;
});
}
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.AutoCompleteFilters[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.AutoCompleteHighlighters[name]);
return true;
}
});
}
// -- DataSource functions -----------------------------------------------------
function useLocal() {
Y.log('using local data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
dataSource : dataSourceLocal,
requestTemplate : function (q) { return q; },
resultFilterLocator: null,
resultFormatter : null
});
}
function useNone() {
Y.log('using no data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
dataSource: null,
resultFilterLocator: null,
resultFormatter: null
});
}
function useFlickr() {
Y.log('using remote Flickr data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
dataSource : dataSourceFlickr,
requestTemplate : 'q=' + encodeURIComponent('select * from flickr.photos.search where text="') + '{query}' + encodeURIComponent('"'),
resultFilterLocator: 'title',
resultFormatter : flickrFormatter
});
}
function useSearch() {
Y.log('using remote Y! Search data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
dataSource : dataSourceSearch,
requestTemplate : 'q=' + encodeURIComponent('select * from search.suggest where query="') + '{query}' + encodeURIComponent('"'),
resultFilterLocator: null,
resultFormatter : null
});
}
});
</script>
</body>
</html>