tests/manual/autocomplete.html

	autocomplete.html revision 98ad4b8502571e9914f72ff72adfba58864dfa07
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner<!DOCTYPE html>
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner<html>
43b4c41fbb07705c9df321221ab9cb9832460407Christian Maeder<head>
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    <!--
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    Note: if you're viewing source to learn how to use AutoComplete, you should
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    be aware that this is a much more complex example than you'd ever be likely
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder    to implement in a real-world use case, since this manual test page tries to
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    cover the majority of AutoComplete's available functionality.
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder
d23ecf32e56cce69bc42eb5c96dddf7909c623abjelmd    Please don't let this scare you off!
d23ecf32e56cce69bc42eb5c96dddf7909c623abjelmd    -->
d23ecf32e56cce69bc42eb5c96dddf7909c623abjelmd    <meta charset="utf-8">
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder    <title>AutoComplete manual test</title>
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    <!-- <link rel="stylesheet" href="/build/cssreset/reset-min.css">
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder    <link rel="stylesheet" href="/build/cssbase/base-min.css"> -->
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    <link rel="stylesheet" href="/assets/test-console.css">
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    <!-- for design iteration -->
7d0ee72ee91ec305408688b969c43f07b9667c80Christian Maeder    <!-- <link rel="stylesheet" href="/assets/autocomplete-list-core.css">
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder    <link rel="stylesheet" href="/assets/skins/sam/autocomplete-list-skin.css"> -->
0e5b095a19790411e5352fa7cf57cb0388e70472Christian Maeder    <style>
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    html {
d23ecf32e56cce69bc42eb5c96dddf7909c623abjelmd        background: #fff;
c9a7e6af169a2adfb92f42331cd578065ed83a2bChristian Maeder        color: #333;
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder        font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder        font-size: 13px;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    body { width: 60%; }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    fieldset {
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        border: 1px solid #afafaf;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        margin-top: 1em;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    fieldset label { margin-right: 0.5em; }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    #ac-input {
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa        margin: 5px 0 10px;
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa        width: 300px;
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa    }
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa
ab4256496e72886018b78571057331f373da6883Eugen Kuksa    #log { margin-top: 4em; }
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa    .flickr {
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa        height: 32px;
a389e88e0acb83d8489bdc5e55bc5522b152bbecEugen Kuksa        overflow: hidden;
a389e88e0acb83d8489bdc5e55bc5522b152bbecEugen Kuksa        padding: 2px;
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa        text-decoration: none;
f8597aabc9db75dcf504e3151faf220a165c90d1Eugen Kuksa    }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    .flickr img {
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        float: left;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        height: 32px;
60e6795dd310e10194e12bb660575aadf941328bEugen Kuksa        margin: 0 4px;
60e6795dd310e10194e12bb660575aadf941328bEugen Kuksa        width: 32px;
60e6795dd310e10194e12bb660575aadf941328bEugen Kuksa    }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    .twitter {
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        clear: both;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        margin: 4px 0;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        padding: 2px 0;
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    }
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner
60e6795dd310e10194e12bb660575aadf941328bEugen Kuksa    .twitter .hd {
c9a7e6af169a2adfb92f42331cd578065ed83a2bChristian Maeder        float: left;
e7757995211bd395dc79d26fe017d99375f7d2a6Christian Maeder    }
e7757995211bd395dc79d26fe017d99375f7d2a6Christian Maeder
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    .twitter .bd,
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    .twitter .ft {
c0c2380bced8159ff0297ece14eba948bd236471Christian Maeder        margin-left: 52px;
404166b9366552e9ec5abb87a37c76ec8a815fb7Klaus Luettich    }
b1f59a4ea7c96f4c03a4d7cfcb9c5e66871cfbbbChristian Maeder
ad270004874ce1d0697fb30d7309f180553bb315Christian Maeder    .twitter .ft {
404166b9366552e9ec5abb87a37c76ec8a815fb7Klaus Luettich        color: #cfcfcf;
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder        font-size: 11px;
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder    }
1a38107941725211e7c3f051f7a8f5e12199f03acmaeder
ce5b44277ea06257548ff625e928cb1290c6d297cmaeder    .twitter .photo {
bab2d88d650448628730ed3b65c9f99c52500e8cChristian Maeder        height: 48px;
fa8878c6145f652f615a04a5e9c15a1d1327bc92cmaeder        margin-top: 3px;
ce5b44277ea06257548ff625e928cb1290c6d297cmaeder        width: 48px;
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    }
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder    .twitter .user { margin-right: 6px; }
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder    </style>
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder</head>
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder<body class="yui3-skin-sam">
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder<h1>AutoComplete manual test</h1>
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder<form id="ac-form">
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder    <div id="ac">
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder        <label for="ac-input">Type things here! Try the name of a US state.</label><br>
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder        <input type="text" id="ac-input">
825a1e4ca1e768de4b4883c65a6cb1dce6aa0002Christian Maeder    </div>
3dde4051c307b609159a097f08a05108fdd036efJonathan von Schroeder
8b767d09a78927b111f5596fdff9ca7d2c1a439fChristian Maeder    <fieldset>
8b767d09a78927b111f5596fdff9ca7d2c1a439fChristian Maeder        <legend>Source</legend>
8b767d09a78927b111f5596fdff9ca7d2c1a439fChristian Maeder        <div>
8b767d09a78927b111f5596fdff9ca7d2c1a439fChristian Maeder            <select id="source">
8b767d09a78927b111f5596fdff9ca7d2c1a439fChristian Maeder                <option value="none">None</option>
8b767d09a78927b111f5596fdff9ca7d2c1a439fChristian Maeder                <option value="local" selected>Local (Array)</option>
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder                <option value="function">Local (Function)</option>
4b4a0b61b72cf8478a5d4d5002bca9f699401363Christian Maeder                <option value="flickr">Remote (Flickr)</option>
4b4a0b61b72cf8478a5d4d5002bca9f699401363Christian Maeder                <option value="search">Remote (Y! Search)</option>
308834907a120fd8771e18292ed2ca9cd767c12dChristian Maeder                <option value="twitter">Remote (Twitter Search)</option>
bab2d88d650448628730ed3b65c9f99c52500e8cChristian Maeder                <option value="xhr">Remote (XHR)</option>
7bb0a9e92bc7a6f868eaa0b9c3212c0af4f96b7fEugen Kuksa            </select>
8cacad2a09782249243b80985f28e9387019fe40Christian Maeder        </div>
6a2dad705deefd1b7a7e09b84fd2d75f2213be47Christian Maeder    </fieldset>
a7c27282e71cf4505026645f96d4f5cb8a284e32Christian Maeder
363939beade943a02b31004cea09dec34fa8a6d9Christian Maeder    <fieldset id="filters">
014dc30f64ec25e4790cca987d4d1e6635430510Christian Maeder        <legend>Result Filters</legend>
f04e8f3ff56405901be968fd4c6e9769239f1a9bKlaus Luettich        <div></div>
6aea82c63ba1d2efc0329bc784a14e521469ec20Christian Maeder    </fieldset>
4ba08bfca0cc8d9da65397b8dfd2654fdb4c0e62Christian Maeder
feca1d35123d8c31aee238c9ce79947b0bf65494Christian Maeder    <fieldset id="highlighters">
431d34c7007a787331c4e5ec997badb0f8190fc7Christian Maeder        <legend>Result Highlighters</legend>
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder        <div>
f5c0884429b01e74c6e658ded921fb2e16dfb478Christian Maeder            <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
db675e8302ddb0d6528088ce68f5e98a00e890e3Christian Maeder            <label for="highlighter_none">None</label>
f1541d4a151dbd08002dbd14e7eb1d5dde253689Christian Maeder        </div>
6dc9bc98d0854fe2e3dd3bfc4275096a0c28ee1cChristian Maeder    </fieldset>
6dc9bc98d0854fe2e3dd3bfc4275096a0c28ee1cChristian Maeder
6dc9bc98d0854fe2e3dd3bfc4275096a0c28ee1cChristian Maeder    <fieldset id="other">
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner        <legend>Other Settings</legend>
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner        <div>
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner            <label for="delimiter">Query delimiter:</label>
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner            <input type="text" id="delimiter">
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder        </div>
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    </fieldset>
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder</form>
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder<div id="log"></div>
9e748851c150e1022fb952bab3315e869aaf0214Christian Maeder
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner<script src="/assets/test-data.js"></script>
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner<script src="/build/yui/yui.js"></script>
ca074a78b8dcccbb8c419586787882f98d0c6163Christian Maeder<script>
a3c6d8e0670bf2aa71bc8e2a3b1f45d56dd65e4cChristian Maedervar Y = YUI({
dc679edd4ca027663212afdf00926ae2ce19b555Christian Maeder    filter: 'raw',
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    filters: {
a2d6702f18737cc5fff8e8631c08f221f8375c4bChristian Maeder        'autocomplete': 'debug',
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder        'autocomplete-base': 'debug',
fdb2d618144159395f7bf8ce3327b3c112a17dd3Till Mossakowski        'autocomplete-list': 'debug'
c72c1e75a969ff4c336e77481c2a8e42603f13eeChristian Maeder    },
c72c1e75a969ff4c336e77481c2a8e42603f13eeChristian Maeder
4017ebc0f692820736d796af3110c3b3018c108aChristian Maeder    useBrowserConsole: false,
ca074a78b8dcccbb8c419586787882f98d0c6163Christian Maeder
ca074a78b8dcccbb8c419586787882f98d0c6163Christian Maeder    // For design iteration.
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    ignore: [
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder        // 'skin-sam-autocomplete',
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder        // 'skin-sam-autocomplete-list'
f2f9df2e17e70674f0bf426ed1763c973ee4cde0Christian Maeder    ]
d946c1bfdd7d58aa7c023efe864d5999eb44a61bChristian Maeder}).use(
d946c1bfdd7d58aa7c023efe864d5999eb44a61bChristian Maeder    'autocomplete',
d946c1bfdd7d58aa7c023efe864d5999eb44a61bChristian Maeder    'autocomplete-filters',
d946c1bfdd7d58aa7c023efe864d5999eb44a61bChristian Maeder    'autocomplete-highlighters',
d946c1bfdd7d58aa7c023efe864d5999eb44a61bChristian Maeder    'console-filters',
a84a8d508a0778b13a4d097a6dd34b95feae78acJens Elkner    'dump',
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder    'event-delegate',
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maederfunction (Y) {
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder
ca074a78b8dcccbb8c419586787882f98d0c6163Christian MaederY.one('#ac-form').reset();
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder// -- Console setup ------------------------------------------------------------
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maedernew Y.Console({
ca074a78b8dcccbb8c419586787882f98d0c6163Christian Maeder    height: '400px',
ca074a78b8dcccbb8c419586787882f98d0c6163Christian Maeder    width: '35%'
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder}).plug(Y.Plugin.ConsoleFilters, {}).render('#log');
8037b7d21021a94b69e4a092f5c98e491333d939cmaeder
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner// -- AutoComplete setup -------------------------------------------------------
f1541d4a151dbd08002dbd14e7eb1d5dde253689Christian Maedervar autoComplete = new Y.AutoComplete({inputNode: '#ac-input'});
6dc9bc98d0854fe2e3dd3bfc4275096a0c28ee1cChristian Maeder
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner// For easier debugging.
e6d5dbbc3308f05197868806e0b860f4f53875f1Christian MaederY.ac = autoComplete;
363939beade943a02b31004cea09dec34fa8a6d9Christian Maeder
e4f4d096e5e6d60dd91c746d0e833d0ac7a29c50Christian Maeder// -- UI stuff -----------------------------------------------------------------
961087225d1d2b9534152a346d1a3755ed952fcdJens Elknervar filtersDiv      = Y.one('#filters>div'),
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder    highlightersDiv = Y.one('#highlighters>div');
961087225d1d2b9534152a346d1a3755ed952fcdJens Elkner
f1541d4a151dbd08002dbd14e7eb1d5dde253689Christian Maeder// Create filter checkboxes.
961087225d1d2b9534152a346d1a3755ed952fcdJens ElknerY.Object.each(Y.AutoCompleteFilters, function (filter, name) {
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder    if (name.indexOf('_') === 0) {
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder        return;
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder    }
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder
93f5b72fdb9ee734caa750b43dd79bbb590dcd73Christian Maeder    filtersDiv.append(
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder        '<input type="checkbox" class="filter" id="filter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
93f5b72fdb9ee734caa750b43dd79bbb590dcd73Christian Maeder        '<label for="filter_' + name + '">' + name + '</label>'
93f5b72fdb9ee734caa750b43dd79bbb590dcd73Christian Maeder    );
328a85c807f2a95c3f147d10b05927eaf862ebebChristian Maeder});
8fb127028cb7dd361e348a3252e33487f73428bcJonathan von Schroeder
06dd4e7c29f33f6122a910719e3bd9062256e397Andy Gimblett// Create highlighter radio buttons.
254df6f22d01eacf7c57b85729e0445747b630d9Christian MaederY.Object.each(Y.AutoCompleteHighlighters, function (highlighter, name) {
4ba08bfca0cc8d9da65397b8dfd2654fdb4c0e62Christian Maeder    if (name.indexOf('_') === 0) {
bff4b3f816be4c1e1d8ded76f1d5af786839e1a9Christian Maeder        return;
7bb0a9e92bc7a6f868eaa0b9c3212c0af4f96b7fEugen Kuksa    }
5b818f10e11fc79def1fdd5c8a080d64a6438d87Christian Maeder
8b0f493ae42bad8b94918cc0957f1af57096cda4Felix Reckers    highlightersDiv.append(
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder        '<input type="radio" class="highlighter" name="highlighter" id="highlighter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
819e29dba060687cf391e444e0f6ff88c1908cc3Christian Maeder        '<label for="highlighter_' + name + '">' + name + '</label>'
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    );
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder});
140287998aa8592c9c403bd9e308e447ba92ae11Christian Maeder
c208973c890b8f993297720fd0247bc7481d4304Christian Maeder// Handle clicks on datasource radio buttons.
0d0278c34a374b29c2d6c58b39b8b56e283d48e8Christian MaederY.one('#source').on('change', function (e) {
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder    switch (e.target.get('value')) {
3554301a34639efb6c9961a8571775d0061284c9Christian Maeder    case 'none':
8b0f493ae42bad8b94918cc0957f1af57096cda4Felix Reckers        useNone();
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder        break;
9e748851c150e1022fb952bab3315e869aaf0214Christian Maeder
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    case 'local':
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder        useLocal();
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder        break;
383aa66e5142365fe9b1f88b18c1da5b27cc8c04Christian Maeder
383aa66e5142365fe9b1f88b18c1da5b27cc8c04Christian Maeder    case 'function':
383aa66e5142365fe9b1f88b18c1da5b27cc8c04Christian Maeder        useFunction();
3554301a34639efb6c9961a8571775d0061284c9Christian Maeder        break;
3554301a34639efb6c9961a8571775d0061284c9Christian Maeder
3554301a34639efb6c9961a8571775d0061284c9Christian Maeder    case 'flickr':
383aa66e5142365fe9b1f88b18c1da5b27cc8c04Christian Maeder        useFlickr();
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder        break;
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder    case 'search':
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder        useSearch();
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder        break;
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder
383aa66e5142365fe9b1f88b18c1da5b27cc8c04Christian Maeder    case 'twitter':
383aa66e5142365fe9b1f88b18c1da5b27cc8c04Christian Maeder        useTwitter();
a14767aeac3e78ed100f5b75e210ba563ee10dbaChristian Maeder        break;
a14767aeac3e78ed100f5b75e210ba563ee10dbaChristian Maeder
a14767aeac3e78ed100f5b75e210ba563ee10dbaChristian Maeder    case 'xhr':
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        useXHR();
3554301a34639efb6c9961a8571775d0061284c9Christian Maeder        break;
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder    }
54ea981a0503c396c2923a1c06421c6235baf27fChristian Maeder});
54ea981a0503c396c2923a1c06421c6235baf27fChristian Maeder
54ea981a0503c396c2923a1c06421c6235baf27fChristian Maeder// Handle clicks on filters.
697e63e30aa3c309a1ef1f9357745111f8dfc5a9Christian MaederY.delegate('click', setFilters, '#filters', 'input[type="checkbox"]');
3554301a34639efb6c9961a8571775d0061284c9Christian Maeder
697e63e30aa3c309a1ef1f9357745111f8dfc5a9Christian Maeder// Handle clicks on highlighters.
f9e0b18852b238ddb649d341194e05d7200d1bbeChristian MaederY.delegate('click', setHighlighter, '#highlighters', 'input[type="radio"]');
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder
f9e0b18852b238ddb649d341194e05d7200d1bbeChristian Maeder// Handle delimiter changes.
819e29dba060687cf391e444e0f6ff88c1908cc3Christian MaederY.on('change', setDelimiter, '#delimiter');
819e29dba060687cf391e444e0f6ff88c1908cc3Christian Maeder
819e29dba060687cf391e444e0f6ff88c1908cc3Christian MaederuseLocal();
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian MaedersetFilters();
254df6f22d01eacf7c57b85729e0445747b630d9Christian MaedersetHighlighter();
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian MaederautoComplete.render();
254df6f22d01eacf7c57b85729e0445747b630d9Christian MaederautoComplete.get('inputNode').focus();
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder// -- UI functions -------------------------------------------------------------
254df6f22d01eacf7c57b85729e0445747b630d9Christian Maederfunction flickrFormatter(query, results) {
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder    return Y.Array.map(results, function (result) {
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        var imgUrl = Y.Lang.sub('http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', result.raw);
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        return '<div class="flickr">' +
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder                 '<img src="' + imgUrl + '" alt="thumbnail">' +
ac34194a668399bb8ef238da77c3a09e93fb253bChristian Maeder                 '<span class="title">' + result.highlighted + '</span>' +
4fc9de0da898448f1d3597ebbd8c04a066464c21Christian Maeder               '</div>';
aded505f9b42cc38975559c2a5d175ae95de436bChristian Maeder    });
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder}
c208973c890b8f993297720fd0247bc7481d4304Christian Maeder
c208973c890b8f993297720fd0247bc7481d4304Christian Maederfunction twitterFormatter(query, results) {
c208973c890b8f993297720fd0247bc7481d4304Christian Maeder    return Y.Array.map(results, function (result) {
0d0278c34a374b29c2d6c58b39b8b56e283d48e8Christian Maeder        return Y.Lang.sub(
0d0278c34a374b29c2d6c58b39b8b56e283d48e8Christian Maeder            '<div class="twitter" data-tweet-id="{id}">' +
0d0278c34a374b29c2d6c58b39b8b56e283d48e8Christian Maeder              '<div class="hd">' +
1842453990fed8a1bd7a5ac792d7982c1d2bfcd5Christian Maeder                '<img src="{imgurl}" class="photo" alt="Profile photo for {user}">' +
0d0278c34a374b29c2d6c58b39b8b56e283d48e8Christian Maeder              '</div>' +
1842453990fed8a1bd7a5ac792d7982c1d2bfcd5Christian Maeder              '<div class="bd">' +
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder                '<strong class="user">{user}</strong>' +
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder                '<span class="tweet-text">{text}</span>' +
986d3f255182539098a97ac86da9eeee5b7a72e3Christian Maeder              '</div>' +
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder              '<div class="ft">' +
4561227a776bdf0ab679b19fb92f1eaaed8786f7Christian Maeder                '{time}' +
01e278bdd7dce13b9303ed3d79683d83c89d09f9Liam O'Reilly              '</div>' +
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder            '</div>'
5ad5dffe06818a13e1632b1119fbca7881085fc1Dominik Luecke        , {
8c812cd83569e973f10cf69a342424ceabc07af9Christian Maeder            id    : result.raw.id,
8c812cd83569e973f10cf69a342424ceabc07af9Christian Maeder            imgurl: result.raw.profile_image_url,
8c812cd83569e973f10cf69a342424ceabc07af9Christian Maeder            text  : result.highlighted,
1535e1d8c82db5f7e2402261983c4c2ef39f4f39Mihai Codescu            time  : result.raw.created_at,
31d6d9286988dc31639d105841296759aeb743e0Jonathan von Schroeder            user  : result.raw.from_user
1535e1d8c82db5f7e2402261983c4c2ef39f4f39Mihai Codescu        });
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroeder    });
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroeder}
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroeder
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroederfunction setDelimiter(e) {
05a206508bc898f87fe6ab6e069814df3c29d303Dominik Luecke    autoComplete.set('queryDelimiter', e.target.get('value'));
05a206508bc898f87fe6ab6e069814df3c29d303Dominik Luecke}
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroederfunction setFilters() {
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder    var filters     = [],
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder        filterNames = [];
d54cd08a4cfa26256c38d8ed12c343adbfe1a0e3Christian Maeder
d54cd08a4cfa26256c38d8ed12c343adbfe1a0e3Christian Maeder    Y.all('#filters input.filter').each(function (input) {
d54cd08a4cfa26256c38d8ed12c343adbfe1a0e3Christian Maeder        if (input.get('checked')) {
3b06e23643a9f65390cb8c1caabe83fa7e87a708Till Mossakowski            filterNames.push(input.get('value'));
b1f59a4ea7c96f4c03a4d7cfcb9c5e66871cfbbbChristian Maeder        }
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder    });
8c812cd83569e973f10cf69a342424ceabc07af9Christian Maeder
0b349288edfa50fdf38fda1a14e1562d03f92574Christian Maeder    Y.Array.each(filterNames, function (name) {
5afff1a0f62394414c33b06141175b3ab0b117a5Christian Maeder        filters.push(name);
5afff1a0f62394414c33b06141175b3ab0b117a5Christian Maeder    });
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder
1b3a2f98d1cd01fc9e0591f69507e20526727559Dominik Luecke    autoComplete.set('resultFilters', filters);
f04e8f3ff56405901be968fd4c6e9769239f1a9bKlaus Luettich}
e39a1626bee36d6ad13a2c0014a80ef179a65bcbChristian Maeder
f8e1a1eca871a26a535a4ee7d51902ba94b1db1eChristian Maederfunction setHighlighter() {
ea3bff3e547a1ac714d4db39c5efef95e02b2e7dChristian Maeder    Y.all('#highlighters input.highlighter').some(function (input) {
dd6f22b9dcff2695181b86372e4df03d5b96e92dKristina Sojakova        var name;
005e0f0c6b0cc898003b03801158c208f3071fc5Kristina Sojakova
abf2487c3aece95c371ea89ac64319370dcb6483Klaus Luettich        if (input.get('checked')) {
23b4e542dca35852f58d1fb3f7d9078c1de5ab06Christian Maeder            name = input.get('value');
23b4e542dca35852f58d1fb3f7d9078c1de5ab06Christian Maeder            autoComplete.set('resultHighlighter', name === 'none' ? null : name);
23b4e542dca35852f58d1fb3f7d9078c1de5ab06Christian Maeder            return true;
76b9b2974795a6fb31f242fd032de3ff66df6204Christian Maeder        }
74a992bd019d3319df2f21f9d358ff06cafb5f7eMihaela Turcu    });
8a78868bae2ec6838c87366c35c57e109154c51eChristian Maeder}
878a5ecd6acf973907e25e5be6e4a792ea19a05eEwaryst Schulz
878a5ecd6acf973907e25e5be6e4a792ea19a05eEwaryst Schulz// -- DataSource functions -----------------------------------------------------
c2e192ace9ef7cfb0e59563f1b24477b2b65cff3Dominik Dietrichfunction useNone() {
6b75c206b317eb30a08d88a8f27e0295ffeb1546Christian Maeder    Y.log('using no source', 'info', 'autocomplete');
9a4b469ca0a7f44a598e551a973c75195207db58Eugen Kuksa
48aa0645e25883048369afc02aac3f49b14a50daChristian Maeder    autoComplete.detachAll('test|*');
01645eac73dbc789392674930adc5745c935f3a0Christian Maeder
01645eac73dbc789392674930adc5745c935f3a0Christian Maeder    autoComplete.setAttrs({
bff4b3f816be4c1e1d8ded76f1d5af786839e1a9Christian Maeder        maxResults       : 0,
bff4b3f816be4c1e1d8ded76f1d5af786839e1a9Christian Maeder        resultFormatter  : null,
3a9fce5398f4621558ca220c66c87cee59adc258Jonathan von Schroeder        resultListLocator: null,
b5da047a9a875dec3f968b6c0df96af326f90fa9Alexis Tsogias        resultTextLocator: null,
0a03acf9fa28e6ff00f4d7c9c6acbae64cf09c56Ewaryst Schulz        source           : null
0a03acf9fa28e6ff00f4d7c9c6acbae64cf09c56Ewaryst Schulz    });
a604cbad8e2202147b5c6bb9f2e06ae61162d654Felix Gabriel Mance}
308834907a120fd8771e18292ed2ca9cd767c12dChristian Maeder
80875f917d741946a39d0ec0b5721e46ba609823Till Mossakowskifunction useLocal() {
7834a982096d93301a4626f444dd9ea5f9fe17eaChristian Maeder    Y.log('using local array source', 'info', 'autocomplete');
1f9274bb2aa44ea236327814dce99946be52e348Felix Gabriel Mance
80875f917d741946a39d0ec0b5721e46ba609823Till Mossakowski    autoComplete.detachAll('test|*');
bab2d88d650448628730ed3b65c9f99c52500e8cChristian Maeder
8fd6a3f938496a502bc62f1923ff7c15f59acf91Christian Maeder    autoComplete.setAttrs({
4b4a0b61b72cf8478a5d4d5002bca9f699401363Christian Maeder        maxResults       : 0,
d62661e54e2662d53b583ae48609f5037701078dcmaeder        resultFormatter  : null,
9f226cec9f978edaba67aee4c4e04e3d3b994b87Daniel Calegari        resultListLocator: null,
7bb0a9e92bc7a6f868eaa0b9c3212c0af4f96b7fEugen Kuksa        resultTextLocator: null,
7bb0a9e92bc7a6f868eaa0b9c3212c0af4f96b7fEugen Kuksa        source           : ExampleData.arrayStates
456238178f89e5a3de2988ee6c8af924297d52d9Christian Maeder    });
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder}
18c1d987ce5818ecf0bfc8af3f43aed2ce86e1eaChristian Maeder
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maederfunction useFunction() {
05a206508bc898f87fe6ab6e069814df3c29d303Dominik Luecke    Y.log('using local function source', 'info', 'autocomplete');
05a206508bc898f87fe6ab6e069814df3c29d303Dominik Luecke
05a206508bc898f87fe6ab6e069814df3c29d303Dominik Luecke    autoComplete.detachAll('test|*');
b891e9ad7dd358a7df24b59bf00d51515078497cChristian Maeder
b891e9ad7dd358a7df24b59bf00d51515078497cChristian Maeder    autoComplete.setAttrs({
5ad5dffe06818a13e1632b1119fbca7881085fc1Dominik Luecke        maxResults       : 0,
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroeder        resultFormatter  : null,
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroeder        resultListLocator: null,
7a3fe82695aa32657693e05712f84d7f81672f2eJonathan von Schroeder        resultTextLocator: null,
1535e1d8c82db5f7e2402261983c4c2ef39f4f39Mihai Codescu        source           : function (query) { return ExampleData.arrayStates; }
1535e1d8c82db5f7e2402261983c4c2ef39f4f39Mihai Codescu    });
1535e1d8c82db5f7e2402261983c4c2ef39f4f39Mihai Codescu}
1535e1d8c82db5f7e2402261983c4c2ef39f4f39Mihai Codescu
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maederfunction useFlickr() {
1c9a63e4f7c6879f51fe0f32154a9116f2c126dbChristian Maeder    Y.log('using remote Flickr YQL source', 'info', 'autocomplete');
6fe9628743562678acf97d6730ebcfee5e9e50c2Christian Maeder
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder    autoComplete.detachAll('test|*');
b891e9ad7dd358a7df24b59bf00d51515078497cChristian Maeder
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder    autoComplete.setAttrs({
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        maxResults       : 0,
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        resultFormatter  : flickrFormatter,
fb328c4f646dd3dd78a9391c5cb58450a3dd0aa9Klaus Luettich        resultListLocator: null,
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder        resultTextLocator: 'title',
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder        source           : 'select * from flickr.photos.search where tags="{query}"'
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder    });
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder}
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroeder
81f49ee02aaa3bc870401f8883bf52742eb3ea7aJonathan von Schroederfunction useSearch() {
b5a6fff5181dad64c4d31e8e4fbb82d4f79813d8Till Mossakowski    Y.log('using remote Y! Search YQL source', 'info', 'autocomplete');
b5a6fff5181dad64c4d31e8e4fbb82d4f79813d8Till Mossakowski
b5a6fff5181dad64c4d31e8e4fbb82d4f79813d8Till Mossakowski    autoComplete.detachAll('test|*');
3b06e23643a9f65390cb8c1caabe83fa7e87a708Till Mossakowski
3b06e23643a9f65390cb8c1caabe83fa7e87a708Till Mossakowski    autoComplete.setAttrs({
3b06e23643a9f65390cb8c1caabe83fa7e87a708Till Mossakowski        maxResults       : 0,
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        resultFormatter  : null,
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        resultListLocator: null,
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder        resultTextLocator: null,
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        source           : 'select * from search.suggest where query="{query}"',
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder        yqlEnv           : 'http://pieisgood.org/yql/tables.env'
61fa0ac06ede811c7aad54ec4c4202346727368eChristian Maeder    });
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder}
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder
8b0f493ae42bad8b94918cc0957f1af57096cda4Felix Reckersfunction useTwitter() {
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder    Y.log('using remote Twitter JSONP source', 'info', 'autocomplete');
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder
e96a0bf4040fd789339958c01f145c5057d26db6René Wagner    autoComplete.detachAll('test|*');
f04e8f3ff56405901be968fd4c6e9769239f1a9bKlaus Luettich
f04e8f3ff56405901be968fd4c6e9769239f1a9bKlaus Luettich    autoComplete.setAttrs({
abf2487c3aece95c371ea89ac64319370dcb6483Klaus Luettich        maxResults       : 5,
e39a1626bee36d6ad13a2c0014a80ef179a65bcbChristian Maeder        resultFormatter  : twitterFormatter,
7868299829c1318b888152243ec2cea4f598b568Christian Maeder        resultListLocator: 'results',
e39a1626bee36d6ad13a2c0014a80ef179a65bcbChristian Maeder        resultTextLocator: 'text',
f8e1a1eca871a26a535a4ee7d51902ba94b1db1eChristian Maeder        source           : 'http://search.twitter.com/search.json?q={query}&callback={callback}&rpp={maxResults}&result_type=recent'
5199920ca3b698b2149c8cb9d2ce2e98a280ff9dChristian Maeder    });
f8e1a1eca871a26a535a4ee7d51902ba94b1db1eChristian Maeder}
ea06324815fff0b73f7524f11af3672c2389f7ecChristian Maeder
ea06324815fff0b73f7524f11af3672c2389f7ecChristian Maederfunction useXHR() {
ea06324815fff0b73f7524f11af3672c2389f7ecChristian Maeder    Y.log('using XHR source', 'info', 'autocomplete');
9f85afecbd79b3df5a0bb17bd28cd0b288dc3213Kristina Sojakova
48aa0645e25883048369afc02aac3f49b14a50daChristian Maeder    autoComplete.detachAll('test|*');
9f85afecbd79b3df5a0bb17bd28cd0b288dc3213Kristina Sojakova
79834070d6d3c63a098e570b12fa3405c607dc70Kristina Sojakova    autoComplete.setAttrs({
79834070d6d3c63a098e570b12fa3405c607dc70Kristina Sojakova        maxResults       : 5,
79834070d6d3c63a098e570b12fa3405c607dc70Kristina Sojakova        resultFormatter  : null,
23b4e542dca35852f58d1fb3f7d9078c1de5ab06Christian Maeder        resultListLocator: null,
23b4e542dca35852f58d1fb3f7d9078c1de5ab06Christian Maeder        resultTextLocator: null,
23b4e542dca35852f58d1fb3f7d9078c1de5ab06Christian Maeder        source           : '/assets/xhr-data.json?query={query}'
8a78868bae2ec6838c87366c35c57e109154c51eChristian Maeder    });
8a78868bae2ec6838c87366c35c57e109154c51eChristian Maeder}
8a78868bae2ec6838c87366c35c57e109154c51eChristian Maeder
624e6701e0deb7ac6c03c0cba0190fbc5033cf93Ewaryst Schulz});
624e6701e0deb7ac6c03c0cba0190fbc5033cf93Ewaryst Schulz</script>
c2e192ace9ef7cfb0e59563f1b24477b2b65cff3Dominik Dietrich
7165a916d2fa1bf87c4741ec63b253413eebbf69Karl Luc</body>
7165a916d2fa1bf87c4741ec63b253413eebbf69Karl Luc</html>
7165a916d2fa1bf87c4741ec63b253413eebbf69Karl Luc