<style>
#ac-input { width: 250px; }
</style>

<div class="intro">
<p>
This example demonstrates how to provide autocomplete suggestions using a <a href="../datasource/index.html">DataSource</a> 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.
</p>

<p>
Type in the name of a city in the US to see the suggestions. Ex. New York, Chicago, etc.
</p>
</div>

<div class="example">
    {{>ac-datasource-source}}
</div>

<h2>HTML</h2>
{{>need-skin-note}}
```
<div id="demo" class="yui3-skin-sam"> {{>need-skin-comment}}
  <label for="ac-input">US city:</label><br>
  <input id="ac-input" type="text">
</div>
```

<h2>JavaScript</h2>

```
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 || [];
    }
  });
});
```

<h2>Complete Example Source</h2>

```
{{>ac-datasource-source}}
```
