tests/manual/autocomplete.html

	autocomplete.html revision 9fbfadc8cecb19e710a4d90e12555337a93af483
2521N/A<!DOCTYPE html>
2521N/A<html>
2521N/A<head>
2521N/A    <!--
2521N/A    Note: if you're viewing source to learn how to use AutoComplete, you should
2521N/A    be aware that this is a much more complex example than you'd ever be likely
2521N/A    to implement in a real-world use case, since this manual test page tries to
2521N/A    cover the majority of AutoComplete's available functionality.
2521N/A
2521N/A    Please don't let this scare you off!
2521N/A    -->
2521N/A    <meta charset="utf-8">
2521N/A    <title>AutoComplete manual test</title>
2521N/A    <!-- <link rel="stylesheet" href="/build/cssreset/reset-min.css">
2521N/A    <link rel="stylesheet" href="/build/cssbase/base-min.css"> -->
2521N/A    <link rel="stylesheet" href="/assets/test-console.css">
2521N/A    <!-- for design iteration -->
2521N/A    <!-- <link rel="stylesheet" href="/assets/autocomplete-list-core.css">
2521N/A    <link rel="stylesheet" href="/assets/skins/sam/autocomplete-list-skin.css"> -->
2521N/A    <style>
2521N/A    html {
2521N/A        background: #fff;
5403N/A        color: #333;
2521N/A        font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
3998N/A        font-size: 13px;
2521N/A    }
2521N/A
2521N/A    body { width: 60%; }
5403N/A
5403N/A    fieldset {
5403N/A        border: 1px solid #afafaf;
2521N/A        margin-top: 1em;
2521N/A    }
2521N/A
5403N/A    fieldset label { margin-right: 0.5em; }
2521N/A
3533N/A    #ac-input {
2521N/A        margin: 5px 0 10px;
2521N/A        width: 300px;
3998N/A    }
2521N/A
5403N/A    #log { margin-top: 4em; }
2899N/A
5425N/A    .flickr {
5425N/A        height: 32px;
3817N/A        overflow: hidden;
3817N/A        padding: 2px;
3817N/A        text-decoration: none;
2521N/A    }
2521N/A
2521N/A    .flickr img {
2521N/A        float: left;
2521N/A        height: 32px;
4049N/A        margin: 0 4px;
2521N/A        width: 32px;
2521N/A    }
3998N/A    </style>
2521N/A</head>
5403N/A<body class="yui3-skin-sam">
5403N/A
5403N/A<h1>AutoComplete manual test</h1>
5403N/A
5403N/A<form id="ac-form">
3998N/A    <div id="ac">
3998N/A        <label for="ac-input">Type things here! Try the name of a US state.</label><br>
3998N/A        <input type="text" id="ac-input">
3998N/A        <div id="ac-list"></div>
3998N/A    </div>
2521N/A
5403N/A    <fieldset id="data-sources">
5403N/A        <legend>Source</legend>
5403N/A        <div>
5403N/A            <input type="radio" id="ds-none" name="ds" value="none">
5403N/A            <label for="ds-none">None</label>
5403N/A
5403N/A            <input type="radio" id="ds-local" name="ds" value="local" checked="checked">
5403N/A            <label for="ds-local">Local</label>
5403N/A
5403N/A            <input type="radio" id="ds-flickr" name="ds" value="flickr">
5403N/A            <label for="ds-flickr">Remote (Flickr)</label>
5403N/A
5403N/A            <input type="radio" id="ds-search" name="ds" value="search">
5403N/A            <label for="ds-search">Remote (Y! Search)</label>
5403N/A        </div>
5403N/A    </fieldset>
5403N/A
5403N/A    <fieldset id="filters">
5403N/A        <legend>Result Filters</legend>
5403N/A        <div></div>
5403N/A    </fieldset>
5403N/A
5403N/A    <fieldset id="highlighters">
2521N/A        <legend>Result Highlighters</legend>
2521N/A        <div>
2521N/A            <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
2521N/A            <label for="highlighter_none">None</label>
2521N/A        </div>
2521N/A    </fieldset>
2521N/A
2521N/A    <fieldset id="other">
4337N/A        <legend>Other Settings</legend>
4337N/A        <div>
2521N/A            <label for="delimiter">Query delimiter:</label>
4285N/A            <input type="text" id="delimiter">
5403N/A        </div>
4049N/A    </fieldset>
4049N/A</form>
4049N/A
4049N/A<div id="log"></div>
5403N/A
4049N/A<script src="/assets/test-data.js"></script>
4049N/A<script src="/build/yui/yui.js"></script>
3817N/A<script>
3817N/Avar Y = YUI({
3817N/A    filter: 'raw',
3817N/A    filters: {
3817N/A        'autocomplete': 'debug',
        'autocomplete-base': 'debug',
        'autocomplete-list': 'debug'
    },

    useBrowserConsole: false,

    // For design iteration.
    ignore: [
        // 'skin-sam-autocomplete',
        // 'skin-sam-autocomplete-list'
    ]
}).use(
    'autocomplete',
    'autocomplete-filters',
    'autocomplete-highlighters',
    'console-filters',
    'dump',
    'event-delegate',
    'yql',
function (Y) {

Y.one('#ac-form').reset();

// -- Console setup ------------------------------------------------------------
new Y.Console({
    height: '400px',
    width: '35%'
}).plug(Y.Plugin.ConsoleFilters, {}).render('#log');

// -- AutoComplete setup -------------------------------------------------------
var autoComplete = new Y.AutoComplete({
        boundingBox: '#ac-list',
        inputNode  : '#ac-input'
    });

// For easier debugging.
Y.ac = autoComplete;

// -- UI stuff -----------------------------------------------------------------
var filtersDiv      = Y.one('#filters>div'),
    highlightersDiv = Y.one('#highlighters>div');

// Create filter checkboxes.
Y.Object.each(Y.AutoCompleteFilters, function (filter, name) {
    if (name.indexOf('_') === 0) {
        return;
    }

    filtersDiv.append(
        '<input type="checkbox" class="filter" id="filter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
        '<label for="filter_' + name + '">' + name + '</label>'
    );
});

// Create highlighter radio buttons.
Y.Object.each(Y.AutoCompleteHighlighters, function (highlighter, name) {
    if (name.indexOf('_') === 0) {
        return;
    }

    highlightersDiv.append(
        '<input type="radio" class="highlighter" name="highlighter" id="highlighter_' + name + '" value="' + name + '"' + (name === 'phraseMatch' ? ' checked="checked"' : '') + '>' +
        '<label for="highlighter_' + name + '">' + name + '</label>'
    );
});

// Handle clicks on datasource radio buttons.
Y.delegate('click', function (e) {
    switch (e.currentTarget.get('value')) {
    case 'none':
        useNone();
        break;

    case 'local':
        useLocal();
        break;

    case 'flickr':
        useFlickr();
        break;

    case 'search':
        useSearch();
        break;
    }
}, '#data-sources', 'input[type="radio"]');

// Handle clicks on filters.
Y.delegate('click', setFilters, '#filters', 'input[type="checkbox"]');

// Handle clicks on highlighters.
Y.delegate('click', setHighlighter, '#highlighters', 'input[type="radio"]');

// Handle delimiter changes.
Y.on('change', setDelimiter, '#delimiter');

useLocal();
setFilters();
setHighlighter();

autoComplete.render();
autoComplete.get('inputNode').focus();

// -- UI functions -------------------------------------------------------------
function flickrFormatter(query, raw, highlighted) {
    return Y.Array.map(raw, function (result, i) {
        var imgUrl = Y.Lang.sub('http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg', result);

        result.linkUrl = Y.Lang.sub('http://www.flickr.com/photos/{owner}/{id}', result);

        return '<div class="flickr">' +
                 '<img src="' + imgUrl + '" alt="thumbnail">' +
                 '<span class="title">' + highlighted[i] + '</span>' +
               '</div>';
    });
}

function setDelimiter(e) {
    autoComplete.set('queryDelimiter', e.target.get('value'));
}

function setFilters() {
    var filters     = [],
        filterNames = [];

    Y.all('#filters input.filter').each(function (input) {
        if (input.get('checked')) {
            filterNames.push(input.get('value'));
        }
    });

    Y.Array.each(filterNames, function (name) {
        filters.push(Y.AutoCompleteFilters[name]);
    });

    autoComplete.set('resultFilters', filters);
}

function setHighlighter() {
    Y.all('#highlighters input.highlighter').some(function (input) {
        var name;

        if (input.get('checked')) {
            name = input.get('value');
            autoComplete.set('resultHighlighter', name === 'none' ? null :
                    Y.AutoCompleteHighlighters[name]);
            return true;
        }
    });
}

// -- DataSource functions -----------------------------------------------------
function useLocal() {
    Y.log('using local data source', 'info', 'autocomplete');

    autoComplete.detachAll('test|*');

    autoComplete.setAttrs({
        resultFormatter  : null,
        resultListLocator: null,
        resultTextLocator: null,
        source           : ExampleData.arrayStates
    });
}

function useNone() {
    Y.log('using no data source', 'info', 'autocomplete');

    autoComplete.detachAll('test|*');

    autoComplete.setAttrs({
        resultFormatter  : null,
        resultListLocator: null,
        resultTextLocator: null,
        source           : null
    });
}

function useFlickr() {
    Y.log('using remote Flickr data source', 'info', 'autocomplete');

    autoComplete.detachAll('test|*');

    autoComplete.setAttrs({
        resultFormatter  : flickrFormatter,
        resultListLocator: null,
        resultTextLocator: 'title',
        source           : 'select * from flickr.photos.search where tags="{query}"'
    });
}

function useSearch() {
    Y.log('using remote Y! Search data source', 'info', 'autocomplete');

    autoComplete.detachAll('test|*');

    autoComplete.setAttrs({
        resultFormatter  : null,
        resultListLocator: null,
        resultTextLocator: null,
        source           : 'select * from search.suggest where query="{query}"'
    });
}

});
</script>

</body>
</html>