YUI 3.x Home -

YUI Library Examples: AutoComplete: Remote Data via DataSource

AutoComplete: Remote Data via DataSource

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 the name of a band or musician to see results from Yahoo! Music. Can't think of one? Try some of my favorites: Dandy Warhols, Black Rebel Motorcycle Club, The Morning After Girls, Dr. Theopolis, or Echo & the Bunnymen.

View example in new window.


HTML

  1. <div id="demo">
  2.   <label for="ac-input">Music artist:</label><br>
  3.   <input id="ac-input" type="text">
  4. </div>
<div id="demo">
  <label for="ac-input">Music artist:</label><br>
  <input id="ac-input" type="text">
</div>

JavaScript

  1. YUI().use("autocomplete", "autocomplete-highlighters", "datasource-get", function (Y) {
  2.   // Create a DataSource instance.
  3.   var ds = new Y.DataSource.Get({
  4.     source: 'http://query.yahooapis.com/v1/public/yql?format=json'
  5.   });
  6.  
  7.   Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
  8.     maxResults: 10,
  9.     resultHighlighter: 'wordMatch',
  10.     resultTextLocator: 'name',
  11.  
  12.     // Use the DataSource instance as the result source.
  13.     source: ds,
  14.  
  15.     // YQL query to use for each request (URL-encoded, except for the
  16.     // {query} placeholder). This will be appended to the URL that was supplied
  17.     // to the DataSource's "source" config above.
  18.     requestTemplate: '&q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22',
  19.  
  20.     // Custom result list locator to parse the results out of the YQL response.
  21.     // This is necessary because YQL sometimes returns an array of results, and
  22.     // sometimes just a single result that isn't in an array.
  23.     resultListLocator: function (response) {
  24.       var results = response[0].query.results &&
  25.             response[0].query.results.Artist;
  26.  
  27.       if (results && !Y.Lang.isArray(results)) {
  28.         results = [results];
  29.       }
  30.  
  31.       return results || [];
  32.     }
  33.   });
  34. });
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: 'wordMatch',
    resultTextLocator: 'name',
 
    // Use the DataSource instance as the result source.
    source: ds,
 
    // YQL query to use for each request (URL-encoded, except for the
    // {query} placeholder). This will be appended to the URL that was supplied
    // to the DataSource's "source" config above.
    requestTemplate: '&q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22',
 
    // 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.Artist;
 
      if (results && !Y.Lang.isArray(results)) {
        results = [results];
      }
 
      return results || [];
    }
  });
});

Complete Example Source

  1. <div id="demo">
  2.   <label for="ac-input">Music artist:</label><br>
  3.   <input id="ac-input" type="text">
  4. </div>
  5.  
  6. <script>
  7. YUI().use("autocomplete", "autocomplete-highlighters", "datasource-get", function (Y) {
  8.   // Create a DataSource instance.
  9.   var ds = new Y.DataSource.Get({
  10.     source: 'http://query.yahooapis.com/v1/public/yql?format=json'
  11.   });
  12.  
  13.   Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
  14.     maxResults: 10,
  15.     resultHighlighter: 'wordMatch',
  16.     resultTextLocator: 'name',
  17.  
  18.     // Use the DataSource instance as the result source.
  19.     source: ds,
  20.  
  21.     // YQL query to use for each request (URL-encoded, except for the
  22.     // {query} placeholder). This will be appended to the URL that was supplied
  23.     // to the DataSource's "source" config above.
  24.     requestTemplate: '&q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22',
  25.  
  26.     // Custom result list locator to parse the results out of the YQL response.
  27.     // This is necessary because YQL sometimes returns an array of results, and
  28.     // sometimes just a single result that isn't in an array.
  29.     resultListLocator: function (response) {
  30.       var results = response[0].query.results &&
  31.             response[0].query.results.Artist;
  32.  
  33.       if (results && !Y.Lang.isArray(results)) {
  34.         results = [results];
  35.       }
  36.  
  37.       return results || [];
  38.     }
  39.   });
  40. });
  41. </script>
<div id="demo">
  <label for="ac-input">Music artist:</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: 'wordMatch',
    resultTextLocator: 'name',
 
    // Use the DataSource instance as the result source.
    source: ds,
 
    // YQL query to use for each request (URL-encoded, except for the
    // {query} placeholder). This will be appended to the URL that was supplied
    // to the DataSource's "source" config above.
    requestTemplate: '&q=select%20*%20from%20music.artist.search%20where%20keyword%3D%22{query}%22',
 
    // 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.Artist;
 
      if (results && !Y.Lang.isArray(results)) {
        results = [results];
      }
 
      return results || [];
    }
  });
});
</script>

More AutoComplete Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings