#

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