#

# Example: Remote Data via YQL

This example demonstrates how to provide autocomplete suggestions using a YQL query as the source. In this case, we're using a custom `search.suggest` YQL table to provide suggestions based on popular Yahoo! Search queries.

Search:

## HTML

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
      <label for="ac-input">Search:</label><br>
      <input id="ac-input" type="text">
    </div>

## JavaScript

    YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
      Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
        resultHighlighter: 'phraseMatch',
        source: 'select * from search.suggest where query="{query}"',
        yqlEnv: 'http://pieisgood.org/yql/tables.env'
      });
    });

## Complete Example Source

    <div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
      <label for="ac-input">Search:</label><br>
      <input id="ac-input" type="text">
    </div>

    <script>
    YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
      Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
        resultHighlighter: 'phraseMatch',
        source: 'select * from search.suggest where query="{query}"',
        yqlEnv: 'http://pieisgood.org/yql/tables.env'
      });
    });
    </script>