autocomplete.html revision c7898fc68c0944de3b9a9081bfa0a3b66bfc518c
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<!DOCTYPE html>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<html>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<head>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <!--
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Note: if you're viewing source to learn how to use AutoComplete, you should
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass be aware that this is a much more complex example than you'd ever be likely
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass to implement in a real-world use case, since this manual test page tries to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass cover the majority of AutoComplete's available functionality.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Please don't let this scare you off!
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass -->
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <meta charset="utf-8">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <title>AutoComplete manual test</title>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <!-- <link rel="stylesheet" href="/build/cssreset/reset-min.css">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <link rel="stylesheet" href="/build/cssbase/base-min.css"> -->
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <link rel="stylesheet" href="/assets/test-console.css">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <!-- for design iteration -->
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <link rel="stylesheet" href="/assets/autocomplete-list-core.css">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <link rel="stylesheet" href="/assets/skins/sam/autocomplete-list-skin.css">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <style>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass html {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass background: #fff;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass color: #333;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass font-size: 13px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass body { width: 60%; }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass fieldset {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass border: 1px solid #afafaf;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass margin-top: 1em;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass fieldset label { margin-right: 0.5em; }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass #ac-input {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass margin: 5px 0 10px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass width: 300px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass #log { margin-top: 4em; }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass .flickr {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass height: 32px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass overflow: hidden;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass padding: 2px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass text-decoration: none;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass .flickr img {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass float: left;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass height: 32px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass margin: 0 4px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass width: 32px;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass </style>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</head>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<body class="yui3-skin-sam">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h1>AutoComplete manual test</h1>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<form>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <div id="ac">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <label for="ac-input">Type things here! Try the name of a US state.</label><br>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="text" id="ac-input">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <div id="ac-list"></div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass </div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <fieldset id="data-sources">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <legend>DataSource</legend>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="radio" id="ds-none" name="ds" value="none">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <label for="ds-none">None</label>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="radio" id="ds-local" name="ds" value="local" checked="checked">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <label for="ds-local">Local</label>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="radio" id="ds-flickr" name="ds" value="flickr">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <label for="ds-flickr">Remote (Flickr)</label>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="radio" id="ds-search" name="ds" value="search">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <label for="ds-search">Remote (Y! Search)</label>
f841387cb4997959ecf710977b259b86f959ba48Luke Smith </div>
f841387cb4997959ecf710977b259b86f959ba48Luke Smith </fieldset>
f841387cb4997959ecf710977b259b86f959ba48Luke Smith
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <fieldset id="filters">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <legend>Result Filters</legend>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <div></div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass </fieldset>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <fieldset id="highlighters">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <legend>Result Highlighters</legend>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass <label for="highlighter_none">None</label>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass </div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass </fieldset>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass</form>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<div id="log"></div>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script src="/assets/test-data.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script src="/build/yui/yui.js"></script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<script>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassvar Y = YUI({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass filter: 'raw',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass filters: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'autocomplete': 'debug',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'autocomplete-base': 'debug',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'autocomplete-list': 'debug'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass useBrowserConsole: false,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // For design iteration.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass ignore: [
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'skin-sam-autocomplete',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'skin-sam-autocomplete-list'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass ]
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}).use(
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'autocomplete',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'autocomplete-filters',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'autocomplete-highlighters',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'console-filters',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'datasource-get',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'datasource-jsonschema',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'datasource-local',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'dump',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'event-delegate',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass 'substitute',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction (Y) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// -- Console setup ------------------------------------------------------------
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassnew Y.Console({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass height: '400px',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass width: '35%'
f841387cb4997959ecf710977b259b86f959ba48Luke Smith}).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// -- AutoComplete setup -------------------------------------------------------
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassvar autoComplete = new Y.AutoCompleteList({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass boundingBox: '#ac-list',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass inputNode: '#ac-input'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass dataSourceFlickr = new Y.DataSource.Get({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass source: 'http://query.yahooapis.com/v1/public/yql?format=json&'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass dataSourceLocal = new Y.DataSource.Local({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass source: ExampleData.arrayStates
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass dataSourceSearch = new Y.DataSource.Get({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass source: 'http://query.yahooapis.com/v1/public/yql?format=json&'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// For easier debugging.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.ac = autoComplete;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// -- DataSource config --------------------------------------------------------
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassdataSourceFlickr.plug({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass fn: Y.Plugin.DataSourceJSONSchema,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass cfg: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass schema: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultListLocator: 'query.results.photo'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass});
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassdataSourceSearch.plug({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass fn: Y.Plugin.DataSourceJSONSchema,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass cfg: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass schema: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultListLocator: 'query.results.Result'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass});
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// -- UI stuff -----------------------------------------------------------------
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassvar filtersDiv = Y.one('#filters>div'),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass highlightersDiv = Y.one('#highlighters>div');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// Create filter checkboxes.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.Object.each(Y.AutoCompleteFilters, function (filter, name) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (name.indexOf('_') === 0) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass return;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass filtersDiv.append(
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass '<input type="checkbox" class="filter" id="filter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass '<label for="filter_' + name + '">' + name + '</label>'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass );
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass});
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// Create highlighter radio buttons.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.Object.each(Y.AutoCompleteHighlighters, function (highlighter, name) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (name.indexOf('_') === 0) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass return;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass highlightersDiv.append(
f841387cb4997959ecf710977b259b86f959ba48Luke Smith '<input type="radio" class="highlighter" name="highlighter" id="highlighter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass '<label for="highlighter_' + name + '">' + name + '</label>'
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass );
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass});
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// Handle clicks on datasource radio buttons.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.delegate('click', function (e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass switch (e.currentTarget.get('value')) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass case 'none':
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass useNone();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass break;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass case 'local':
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass useLocal();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass break;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass case 'flickr':
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass useFlickr();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass break;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass case 'search':
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass useSearch();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass break;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}, '#data-sources', 'input[type="radio"]');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// Handle clicks on filters.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.delegate('click', setFilters, '#filters', 'input[type="checkbox"]');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// Handle clicks on highlighters.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.delegate('click', setHighlighter, '#highlighters', 'input[type="radio"]');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassuseLocal();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlasssetFilters();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlasssetHighlighter();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassautoComplete.render();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassautoComplete.get('inputNode').focus();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// -- UI functions -------------------------------------------------------------
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction flickrFormatter(query, raw, highlighted) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass return Y.Array.map(raw, function (result, i) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var imgUrl = Y.substitute('http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', result);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass result.linkUrl = Y.substitute('http://www.flickr.com/photos/{owner}/{id}', result);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass return '<div class="flickr">' +
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass '<img src="' + imgUrl + '" alt="thumbnail">' +
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass '<span class="title">' + highlighted[i] + '</span>' +
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass '</div>';
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction setFilters() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var filters = [],
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass filterNames = [];
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.all('#filters input.filter').each(function (input) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (input.get('checked')) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass filterNames.push(input.get('value'));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.Array.each(filterNames, function (name) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass filters.push(Y.AutoCompleteFilters[name]);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.set('resultFilters', filters);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction setHighlighter() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.all('#highlighters input.highlighter').some(function (input) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var name;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (input.get('checked')) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass name = input.get('value');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.set('resultHighlighter', name === 'none' ? null :
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.AutoCompleteHighlighters[name]);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass return true;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass// -- DataSource functions -----------------------------------------------------
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction useLocal() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.log('using local data source', 'info', 'autocomplete');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.detachAll('test|*');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.setAttrs({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass dataSource : dataSourceLocal,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass requestTemplate: function (q) { return q; },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultLocator : null,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultFormatter: null
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction useNone() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.log('using no data source', 'info', 'autocomplete');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.detachAll('test|*');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.setAttrs({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass dataSource : null,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultLocator : null,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultFormatter: null
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction useFlickr() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.log('using remote Flickr data source', 'info', 'autocomplete');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.detachAll('test|*');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass autoComplete.setAttrs({
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass dataSource : dataSourceFlickr,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass requestTemplate: 'q=' + encodeURIComponent('select * from flickr.photos.search where tags="') + '{query}' + encodeURIComponent('"'),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultLocator : 'title',
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass resultFormatter: flickrFormatter
});
}
function useSearch() {
Y.log('using remote Y! Search data source', 'info', 'autocomplete');
autoComplete.detachAll('test|*');
autoComplete.setAttrs({
dataSource : dataSourceSearch,
requestTemplate: 'q=' + encodeURIComponent('select * from search.suggest where query="') + '{query}' + encodeURIComponent('"'),
resultLocator : null,
resultFormatter: null
});
}
});
</script>
</body>
</html>