<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>

<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>
