tests/manual/autocomplete.html

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