tests/manual/autocomplete.html

	autocomplete.html revision 6d408e55d70c428d9bec98954a332ac92adad6ce
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AutoComplete manual test</title>
    <link rel="stylesheet" href="/assets/test-console.css">
    <style>
    body { width: 60%; }

    fieldset {
        border: 1px solid #afafaf;
        margin-bottom: 1em;
    }

    fieldset label { margin-right: 0.5em; }

    #ac-input { width: 17em; }
    #log { margin-top: 4em; }
    </style>
</head>
<body class="yui3-skin-sam">

<h1>AutoComplete manual test</h1>

<form>
    <div id="ac">
        <label for="ac-input">Type things here! Try the name of a US state.</label><br>
        <input type="text" id="ac-input">
    </div>

    <fieldset id="data-sources">
        <legend>DataSource</legend>
        <div>
            <input type="radio" id="ds-none" name="ds" value="none">
            <label for="ds-none">None</label>

            <input type="radio" id="ds-local" name="ds" value="local" checked="checked">
            <label for="ds-local">Local</label>

            <input type="radio" id="ds-remote" name="ds" value="remote">
            <label for="ds-remote">Remote (JSONP)</label>
        </div>
    </fieldset>

    <fieldset id="filters">
      <legend>Result Filters</legend>
      <div>
      </div>
    </fieldset>

    <fieldset id="highlighters">
      <legend>Result Highlighters</legend>
      <div>
          <input type="radio" class="highlighter" name="highlighter" id="highlighter_none" value="none" checked="checked">
          <label for="highlighter_none">None</label>
      </div>
    </fieldset>
</form>

<div id="log"></div>

<script src="/assets/test-data.js"></script>
<script src="/build/yui/yui.js"></script>
<script src="/js/autocomplete-list.js"></script>
<script>
var Y = YUI({
    filter: 'raw',
    filters: {
        'autocompleteBase': 'debug',
        'autocomplete': 'debug'
    },
    useBrowserConsole: false
}).use(
    'autocomplete-base',
    'autocomplete-filters',
    'autocomplete-highlighters',
    'autocomplete-list',
    'console-filters',
    'datasource-get',
    'datasource-jsonschema',
    'datasource-local',
    'dump',
    'event-delegate',
    function (Y) {

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

// -- AutoComplete setup -------------------------------------------------------
var dataSourceLocal = new Y.DataSource.Local({
        source: ExampleData.arrayStates
    }),

    dataSourceRemote = new Y.DataSource.Get({
        source: 'http://query.yahooapis.com/v1/public/yql?format=json&'
    }),

    autoComplete = new Y.AutoCompleteList({render: true, srcNode: '#ac'});

dataSourceRemote.plug({
    fn: Y.Plugin.DataSourceJSONSchema,
    cfg: {
        schema: {
            resultListLocator: 'query.results.Result'
        }
    }
});

autoComplete.on('results', function (e) {
    Y.log('results: ' + Y.dump(e.results), 'info', 'autocomplete');
});

// For easier debugging.
Y.autoComplete = 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 === 'startsWith' ? ' 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 + '">' +
        '<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 'remote':
        useRemote();
        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"]');

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

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

// -- UI functions -------------------------------------------------------------
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.set('dataSource', dataSourceLocal);
    autoComplete.set('requestTemplate', function (q) { return q; });
}

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

    autoComplete.detachAll('test|*');
    autoComplete.set('dataSource', null);
}

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

    autoComplete.detachAll('test|*');
    autoComplete.set('dataSource', dataSourceRemote);
    autoComplete.set('requestTemplate', 'q=' + encodeURIComponent('select * from search.suggest where query="') + '{query}' + encodeURIComponent('"'));
}

});
</script>

</body>
</html>