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.


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>

Examples