Example: Remote Data via JSONP

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.

Enter a YUI module name:

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>