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.

HTML

{{>need-skin-note}} ```

{{>need-skin-comment}} US city:

```

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

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