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