#

# Example: Remote Data via DataSource

This example demonstrates how to provide autocomplete suggestions using a DataSource instance. While AutoComplete supports a variety of result sources without requiring a DataSource, using a DataSource can give you more control over how results are retrieved and processed, and also allows you to share data with other DataSource-based widgets on the page.

Type in the name of a city in the US to see the suggestions. Ex. New York, Chicago, etc.

US city:

## 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">US city:</label><br>
      <input id="ac-input" type="text">
    </div>

## JavaScript

    YUI().use('autocomplete', 'autocomplete-highlighters', 'datasource-get', function (Y) {
      // Create a DataSource instance.
      var ds = new Y.DataSource.Get({
        source: 'http://query.yahooapis.com/v1/public/yql?format=json'
      });

      Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
        maxResults: 10,
        resultHighlighter: 'phraseMatch',
        resultTextLocator: function (result) {
          return result.name + ', ' + result.admin1.content + ', ' + result.country.content;
        },

        // Use the DataSource instance as the result source.
        source: ds,

        // YQL query to use for each request. This will be appended to the URL
        // that was supplied to the DataSource's "source" config above.
        requestTemplate: '&q=select * from geo.places where text="{query}" and placeTypeName.content="Town" and country.content="United States"',

        // Custom result list locator to parse the results out of the YQL response.
        // This is necessary because YQL sometimes returns an array of results, and
        // sometimes just a single result that isn't in an array.
        resultListLocator: function (response) {
          var results = response[0].query.results &&
                response[0].query.results.place;

          if (results && !Y.Lang.isArray(results)) {
            results = [results];
          }

          return results || [];
        }
      });
    });

## Complete Example Source

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

    <script>
    YUI().use('autocomplete', 'autocomplete-highlighters', 'datasource-get', function (Y) {
      // Create a DataSource instance.
      var ds = new Y.DataSource.Get({
        source: 'http://query.yahooapis.com/v1/public/yql?format=json'
      });

      Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
        maxResults: 10,
        resultHighlighter: 'phraseMatch',
        resultTextLocator: function (result) {
          return result.name + ', ' + result.admin1.content + ', ' + result.country.content;
        },

        // Use the DataSource instance as the result source.
        source: ds,

        // YQL query to use for each request. This will be appended to the URL
        // that was supplied to the DataSource's "source" config above.
        requestTemplate: '&q=select * from geo.places where text="{query}" and placeTypeName.content="Town" and country.content="United States"',

        // Custom result list locator to parse the results out of the YQL response.
        // This is necessary because YQL sometimes returns an array of results, and
        // sometimes just a single result that isn't in an array.
        resultListLocator: function (response) {
          var results = response[0].query.results &&
                response[0].query.results.place;

          if (results && !Y.Lang.isArray(results)) {
            results = [results];
          }

          return results || [];
        }
      });
    });
    </script>