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