autocomplete.html revision 34c69cacb93debefe22f29ffe643d6d2d4c1de73
0N/A<!DOCTYPE html>
3726N/A<html>
0N/A<head>
0N/A <meta charset="utf-8">
0N/A <title>AutoComplete manual test</title>
0N/A <!-- <link rel="stylesheet" href="/build/cssreset/reset-min.css">
0N/A <link rel="stylesheet" href="/build/cssbase/base-min.css"> -->
0N/A <link rel="stylesheet" href="/common/tests/assets/test-console.css">
0N/A <!-- for design iteration -->
0N/A <!-- <link rel="stylesheet" href="/assets/autocomplete-list-core.css">
0N/A <link rel="stylesheet" href="/assets/skins/sam/autocomplete-list-skin.css"> -->
0N/A <style>
0N/A html {
0N/A background: #fff;
0N/A color: #333;
0N/A font-family: Helvetica, sans-serif;
0N/A font-size: 13px;
0N/A }
1472N/A
1472N/A body { width: 60%; }
1472N/A
0N/A fieldset {
0N/A border: 1px solid #afafaf;
0N/A margin-top: 1em;
1879N/A }
2262N/A
1879N/A fieldset label { margin-right: 0.5em; }
1879N/A
1879N/A #ac-input {
1879N/A margin: 5px 0 10px;
1879N/A width: 300px;
1879N/A }
1879N/A
1879N/A #log { margin-top: 4em; }
1879N/A
1879N/A /* Scrollable result list */
1879N/A .yui3-aclist-content {
1879N/A max-height: 300px;
1879N/A overflow-y: auto;
0N/A }
0N/A
0N/A .flickr {
0N/A height: 32px;
0N/A overflow: hidden;
0N/A padding: 2px;
0N/A text-decoration: none;
0N/A }
0N/A
0N/A .flickr img {
2498N/A float: left;
0N/A height: 32px;
0N/A margin: 0 4px;
0N/A width: 32px;
0N/A }
0N/A
0N/A .twitter {
0N/A clear: both;
0N/A margin: 4px 0;
0N/A padding: 2px 0;
0N/A }
0N/A
0N/A .twitter .hd {
0N/A float: left;
0N/A }
0N/A
0N/A .twitter .bd,
0N/A .twitter .ft {
0N/A margin-left: 52px;
0N/A }
0N/A
0N/A .twitter .ft {
0N/A color: #cfcfcf;
0N/A font-size: 11px;
0N/A }
0N/A
0N/A .twitter .photo {
0N/A height: 48px;
0N/A margin-top: 3px;
0N/A width: 48px;
0N/A }
0N/A
0N/A .twitter .user { margin-right: 6px; }
0N/A </style>
0N/A</head>
0N/A<body class="yui3-skin-sam">
0N/A
0N/A<h1>AutoComplete manual test</h1>
0N/A
0N/A<form id="ac-form">
0N/A <div id="ac">
0N/A <label for="ac-input">Type things here! Try the name of a US state.</label><br>
0N/A <input type="text" id="ac-input">
0N/A </div>
0N/A
0N/A <fieldset>
0N/A <legend>Source</legend>
0N/A <div>
0N/A <select id="source">
0N/A <option value="none">None</option>
0N/A <option value="local" selected>Local (Array)</option>
0N/A <option value="function">Local (Function)</option>
0N/A <option value="flickr">Remote (YQL - Flickr)</option>
0N/A <option value="search">Remote (YQL - Y! Search)</option>
0N/A <option value="twitter">Remote (JSONP - Twitter Search)</option>
0N/A <option value="xhr">Remote (XHR)</option>
0N/A <option value="ds">Remote (DataSource.Get)</option>
0N/A </select>
0N/A
0N/A <input type="checkbox" id="enable-cache" value="1" checked="checked">
0N/A <label for="enable-cache">Enable cache</label>
0N/A </div>
0N/A </fieldset>
0N/A
0N/A <fieldset id="filters">
0N/A <legend>Result Filters</legend>
0N/A <div></div>
0N/A </fieldset>
0N/A
0N/A <fieldset id="highlighters">
0N/A <legend>Result Highlighters</legend>
0N/A <div>
0N/A <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
0N/A <label for="highlighter_none">None</label>
0N/A </div>
0N/A </fieldset>
0N/A
0N/A <fieldset id="other">
0N/A <legend>Other Settings</legend>
304N/A <div>
0N/A <label for="delimiter">Query delimiter:</label>
0N/A <input type="text" id="delimiter">
0N/A </div>
304N/A </fieldset>
0N/A</form>
0N/A
0N/A<div id="log"></div>
0N/A
0N/A<script src="/assets/test-data.js"></script>
0N/A<script src="/build/yui/yui.js"></script>
0N/A<script>
0N/Avar Y = YUI({
0N/A filter: 'raw',
0N/A filters: {
0N/A 'autocomplete': 'debug',
0N/A 'autocomplete-base': 'debug',
0N/A 'autocomplete-list': 'debug'
0N/A },
0N/A
0N/A useBrowserConsole: false,
0N/A
0N/A // For design iteration.
0N/A ignore: [
0N/A // 'skin-sam-autocomplete',
0N/A // 'skin-sam-autocomplete-list'
0N/A ]
0N/A}).use(
0N/A 'autocomplete',
0N/A 'autocomplete-filters',
0N/A 'autocomplete-highlighters',
0N/A 'console-filters',
0N/A 'datasource',
0N/A 'dump',
0N/A 'event-delegate',
0N/Afunction (Y) {
0N/A
0N/AY.one('#ac-form').reset();
0N/A
0N/A// -- Console setup ------------------------------------------------------------
0N/Anew Y.Console({
0N/A height: '400px',
0N/A width: '35%'
0N/A}).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
0N/A
0N/A// -- AutoComplete setup -------------------------------------------------------
0N/Avar autoComplete = new Y.AutoComplete({
0N/A inputNode : '#ac-input',
0N/A scrollIntoView: true
0N/A});
0N/A
0N/A// For easier debugging.
0N/AY.ac = autoComplete;
0N/A
0N/A// -- UI stuff -----------------------------------------------------------------
0N/Avar filtersDiv = Y.one('#filters>div'),
0N/A highlightersDiv = Y.one('#highlighters>div');
0N/A
0N/A// Create filter checkboxes.
0N/AY.Object.each(Y.AutoCompleteFilters, function (filter, name) {
0N/A if (name.indexOf('_') === 0) {
0N/A return;
0N/A }
0N/A
304N/A filtersDiv.append(
0N/A '<input type="checkbox" class="filter" id="filter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
0N/A '<label for="filter_' + name + '">' + name + '</label>'
0N/A );
0N/A});
0N/A
0N/A// Create highlighter radio buttons.
0N/AY.Object.each(Y.AutoCompleteHighlighters, function (highlighter, name) {
0N/A if (name.indexOf('_') === 0) {
0N/A return;
0N/A }
0N/A
0N/A highlightersDiv.append(
0N/A '<input type="radio" class="highlighter" name="highlighter" id="highlighter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
0N/A '<label for="highlighter_' + name + '">' + name + '</label>'
0N/A );
0N/A});
0N/A
0N/A// Handle clicks on datasource radio buttons.
0N/AY.one('#source').on('change', function (e) {
0N/A switch (e.target.get('value')) {
304N/A case 'none':
0N/A useNone();
0N/A break;
0N/A
0N/A case 'local':
0N/A useLocal();
304N/A break;
304N/A
304N/A case 'function':
304N/A useFunction();
0N/A break;
304N/A
0N/A case 'flickr':
304N/A useFlickr();
304N/A break;
304N/A
304N/A case 'search':
0N/A useSearch();
0N/A break;
304N/A
304N/A case 'twitter':
304N/A useTwitter();
304N/A break;
304N/A
304N/A case 'xhr':
304N/A useXHR();
304N/A break;
0N/A
0N/A case 'ds':
304N/A useDS();
0N/A break;
0N/A }
0N/A});
304N/A
304N/A// Handle clicks on options.
0N/AY.on('click', setCache, '#enable-cache');
0N/A
304N/A// Handle clicks on filters.
304N/AY.delegate('click', setFilters, '#filters', 'input[type="checkbox"]');
0N/A
0N/A// Handle clicks on highlighters.
0N/AY.delegate('click', setHighlighter, '#highlighters', 'input[type="radio"]');
0N/A
0N/A// Handle delimiter changes.
0N/AY.on('change', setDelimiter, '#delimiter');
0N/A
0N/AuseLocal();
0N/AsetFilters();
0N/AsetHighlighter();
0N/A
0N/AautoComplete.render();
0N/AautoComplete.get('inputNode').focus();
0N/A
0N/A// -- UI functions -------------------------------------------------------------
0N/Afunction flickrFormatter(query, results) {
0N/A return Y.Array.map(results, function (result) {
0N/A var imgUrl = Y.Lang.sub('http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', result.raw);
0N/A
0N/A return '<div class="flickr">' +
0N/A '<img src="' + imgUrl + '" alt="thumbnail">' +
0N/A '<span class="title">' + result.highlighted + '</span>' +
0N/A '</div>';
0N/A });
0N/A}
0N/A
0N/Afunction twitterFormatter(query, results) {
0N/A return Y.Array.map(results, function (result) {
0N/A return Y.Lang.sub(
0N/A '<div class="twitter" data-tweet-id="{id}">' +
0N/A '<div class="hd">' +
0N/A '<img src="{imgurl}" class="photo" alt="Profile photo for {user}">' +
0N/A '</div>' +
0N/A '<div class="bd">' +
0N/A '<strong class="user">{user}</strong>' +
0N/A '<span class="tweet-text">{text}</span>' +
0N/A '</div>' +
0N/A '<div class="ft">' +
0N/A '{time}' +
0N/A '</div>' +
0N/A '</div>'
0N/A , {
0N/A id : result.raw.id,
0N/A imgurl: result.raw.profile_image_url,
0N/A text : result.highlighted,
0N/A time : result.raw.created_at,
0N/A user : result.raw.from_user
0N/A });
0N/A });
0N/A}
0N/A
0N/Afunction setCache(e) {
0N/A autoComplete.set('enableCache', e.target.get('checked'));
0N/A}
0N/A
0N/Afunction setDelimiter(e) {
0N/A autoComplete.set('queryDelimiter', e.target.get('value'));
304N/A}
0N/A
0N/Afunction setFilters() {
1060N/A var filters = [],
1060N/A filterNames = [];
1060N/A
1060N/A Y.all('#filters input.filter').each(function (input) {
0N/A if (input.get('checked')) {
1060N/A filterNames.push(input.get('value'));
0N/A }
0N/A });
0N/A
0N/A Y.Array.each(filterNames, function (name) {
1060N/A filters.push(name);
0N/A });
0N/A
0N/A autoComplete.set('resultFilters', filters);
0N/A}
0N/A
1060N/Afunction setHighlighter() {
304N/A Y.all('#highlighters input.highlighter').some(function (input) {
1060N/A var name;
304N/A
0N/A if (input.get('checked')) {
0N/A name = input.get('value');
0N/A autoComplete.set('resultHighlighter', name === 'none' ? null : name);
0N/A return true;
0N/A }
0N/A });
0N/A}
0N/A
0N/A// -- DataSource functions -----------------------------------------------------
304N/Afunction useNone() {
1909N/A Y.log('using no source', 'info', 'autocomplete');
1909N/A
0N/A autoComplete.detachAll('test|*');
304N/A
0N/A autoComplete.setAttrs({
0N/A maxResults : 0,
0N/A requestTemplate : null,
0N/A resultFormatter : null,
0N/A resultListLocator: null,
1909N/A resultTextLocator: null,
1909N/A source : null
0N/A });
0N/A}
0N/A
0N/Afunction useLocal() {
0N/A Y.log('using local array source', 'info', 'autocomplete');
0N/A
0N/A autoComplete.detachAll('test|*');
0N/A
0N/A autoComplete.setAttrs({
0N/A maxResults : 0,
0N/A requestTemplate : null,
0N/A resultFormatter : null,
0N/A resultListLocator: null,
0N/A resultTextLocator: null,
0N/A source : ExampleData.arrayStates
0N/A });
0N/A}
0N/A
0N/Afunction useFunction() {
304N/A Y.log('using local function source', 'info', 'autocomplete');
304N/A
304N/A autoComplete.detachAll('test|*');
304N/A
304N/A autoComplete.setAttrs({
0N/A maxResults : 0,
0N/A requestTemplate : null,
0N/A resultFormatter : null,
1204N/A resultListLocator: null,
0N/A resultTextLocator: null,
0N/A source : function (query) { return ExampleData.arrayStates; }
0N/A });
0N/A}
0N/A
0N/Afunction useFlickr() {
0N/A Y.log('using remote Flickr YQL source', 'info', 'autocomplete');
0N/A
0N/A autoComplete.detachAll('test|*');
0N/A
0N/A autoComplete.setAttrs({
0N/A maxResults : 0,
1204N/A requestTemplate : null,
0N/A resultFormatter : flickrFormatter,
1204N/A resultListLocator: null,
0N/A resultTextLocator: 'title',
0N/A source : 'select * from flickr.photos.search where tags="{query}"'
1295N/A });
0N/A}
1295N/A
0N/Afunction useSearch() {
0N/A Y.log('using remote Y! Search YQL source', 'info', 'autocomplete');
0N/A
0N/A autoComplete.detachAll('test|*');
1295N/A
2168N/A autoComplete.setAttrs({
2168N/A maxResults : 0,
3089N/A requestTemplate : null,
0N/A resultFormatter : null,
1204N/A resultListLocator: null,
1204N/A resultTextLocator: null,
0N/A source : 'select * from search.suggest where query="{query}"',
0N/A yqlEnv : 'http://pieisgood.org/yql/tables.env'
1204N/A });
1378N/A}
1378N/A
1378N/Afunction useTwitter() {
1378N/A Y.log('using remote Twitter JSONP source', 'info', 'autocomplete');
1378N/A
1378N/A autoComplete.detachAll('test|*');
1378N/A
1378N/A autoComplete.setAttrs({
1378N/A maxResults : 5,
1378N/A requestTemplate : null,
1378N/A resultFormatter : twitterFormatter,
1378N/A resultListLocator: 'results',
1378N/A resultTextLocator: 'text',
1378N/A source : 'http://search.twitter.com/search.json?q={query}&callback={callback}&rpp={maxResults}&result_type=recent'
2796N/A });
2796N/A}
1378N/A
1378N/Afunction useXHR() {
1378N/A Y.log('using XHR source', 'info', 'autocomplete');
1378N/A
1378N/A autoComplete.detachAll('test|*');
1378N/A
1378N/A autoComplete.setAttrs({
1378N/A maxResults : 5,
1378N/A requestTemplate : null,
1378N/A resultFormatter : null,
1378N/A resultListLocator: null,
1378N/A resultTextLocator: null,
1378N/A source : '/assets/xhr-data.json?query={query}'
1378N/A });
1378N/A}
1378N/A
1378N/Afunction useDS() {
1750N/A var ds;
1750N/A
1750N/A Y.log('using DataSource', 'info', 'autocomplete');
1378N/A
1378N/A autoComplete.detachAll('test|*');
1378N/A
1378N/A ds = new Y.DataSource.Get({source: 'http://search.twitter.com/searches.json?result_type=recent'});
1378N/A
1378N/A autoComplete.setAttrs({
1378N/A maxResults : 5,
1378N/A requestTemplate : '&q={query}',
1378N/A resultFormatter : twitterFormatter,
1378N/A
1378N/A resultListLocator: function (response) {
1378N/A return response[0].results;
1378N/A },
1378N/A
1378N/A resultTextLocator: 'text',
1378N/A source : ds
1378N/A });
1378N/A}
1378N/A
1378N/A});
1204N/A</script>
0N/A
0N/A</body>
0N/A</html>
0N/A