+This example demonstrates how to provide autocomplete suggestions from a remote JSONP API. In this case, we're using the YUI Library website's search API to suggest YUI module names. +
+ ++Try typing in a YUI module name. If you cannot think of any, try typing one of these: node, widget, autocomplete. +
++ +
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">Enter a YUI module name:</label><br> + <input id="ac-input" type="text" size="45"> +</div>+ + +
JavaScript
+ +YUI Library Search Response Data
+ ++The YUI Library website's search API returns a JavaScript object that looks like this: +
+ +{
+ "status": "success",
+ "data": {
+ "query": "node",
+ "total": 218,
+ "maxScore": 153.57176,
+ "took": 3,
+ "results": [
+ {
+ "_index": "docs",
+ "_type": "component",
+ "_id": "component#node",
+ "_score": 153.57176,
+ "name": "node",
+ "displayName": "Node",
+ "description": "Provides a wrapper for working with DOM nodes.",
+ "author": "msweeney",
+ "url": "/yui/docs/node/"
+ },
+
+ ...
+ ]
+ }
+}
+
+
+
+If the response were a simple array of strings, AutoComplete would interpret it correctly by default. However, in this case, the response is an object that contains a data.results property, the value of which is an array of result objects rather than an array of strings. Furthermore, we only want results whose _type property is "module".
+
+This means we'll need to specify a resultListLocator to filter down the JSONP response to just an array of module results. Additionally we'll provide a values for resultTextLocator to indicate the property on each result object that contains the suggestion text, as demonstrated in the implementation code below.
+
Implementation
+ +YUI().use('array-extras', 'autocomplete', 'autocomplete-highlighters', function (Y) {
+ function locateModules(response) {
+ var results = (response && response.data && response.data.results) || [];
+
+ return Y.Array.filter(results, function (result) {
+ return result._type === 'module';
+ });
+ }
+
+ Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
+ resultHighlighter: 'phraseMatch',
+ resultListLocator: locateModules,
+ resultTextLocator: 'name',
+ source: 'http://yuilibrary.com/api/v1/search/suggest?q={query}&callback={callback}&count=50'
+ });
+});
+
+
+Complete Example Source
+ +<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
+ <label for="ac-input">Enter a YUI module name:</label><br>
+ <input id="ac-input" type="text" size="45">
+</div>
+
+<script>
+YUI().use('array-extras', 'autocomplete', 'autocomplete-highlighters', function (Y) {
+ function locateModules(response) {
+ var results = (response && response.data && response.data.results) || [];
+
+ return Y.Array.filter(results, function (result) {
+ return result._type === 'module';
+ });
+ }
+
+ Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
+ resultHighlighter: 'phraseMatch',
+ resultListLocator: locateModules,
+ resultTextLocator: 'name',
+ source: 'http://yuilibrary.com/api/v1/search/suggest?q={query}&callback={callback}&count=50'
+ });
+});
+</script>
+
+