YUI Library Examples: AutoComplete Control: Custom Formatting, with a Proxyless Remote DataSource

Sample Code

Data:

{
 "query": {
  "count": 1,
  "created": "2011-06-11T06:36:04Z",
  "lang": "en-US",
  "results": {
   "RDF": {
    ...
    "item": [
     {
      "about": "http://sfbay.craigslist.org/pen/bik/2433636482.html",
      "title": [
       "1984 Schwinn High Sierra Mountain bike  excellent condition a must see (san mateo) $185",
       "1984 Schwinn High Sierra Mountain bike  excellent condition a must see (san mateo) $185"
      ],
      "link": "http://sfbay.craigslist.org/pen/bik/2433636482.html",
      "description": "For sale is a vintage 1984 Schwinn High Sierra mountain bike...",
      "date": "2011-06-10T21:35:18-07:00",
      "language": "en-us",
      "rights": "Copyright © 2011 craigslist, inc.",
      "source": "http://sfbay.craigslist.org/pen/bik/2433636482.html",
      "type": "text",
      "issued": "2011-06-10T21:35:18-07:00"
     },
     {
      "about": "http://sfbay.craigslist.org/sby/for/2433581609.html",
      "title": [
       " $25 storage box from the Dominican Republic rep dominicana (gilroy)",
       " $25 storage box from the Dominican Republic rep dominicana (gilroy)"
      ],
      "link": "http://sfbay.craigslist.org/sby/for/2433581609.html",
      "description": " $25 storage box from the ...",
      "date": "2011-06-10T20:35:06-07:00",
      "language": "en-us",
      "rights": "Copyright © 2011 craigslist, inc.",
      "source": "http://sfbay.craigslist.org/sby/for/2433581609.html",
      "type": "text",
      "issued": "2011-06-10T20:35:06-07:00"
     },
     ...
    ]
   }
  }
 }
}

CSS:

Markup:

JavaScript:

YAHOO.example.CustomFormatting = (function(){
    // Instantiate DataSource
    var oDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?");
    oDS.responseSchema = {
        resultsList : "query.results.RDF.item",
        fields : ["title[0]", "link"]
    };

// Setting to default value for demonstration purposes.
    // The webservice needs to support execution of a callback function.
    oDS.scriptCallbackParam = "callback";

// Instantiate AutoComplete
    var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);

// Bump up the query delay to reduce server load
    oAC.queryDelay = 1;

// The webservice needs custom parameters
    oAC.generateRequest = function(sQuery) {
        return "q=select%20*%20from%20craigslist.search%20where%20location%3D%22sfbay%22%20and%20type%3D%22sss%22%20and%20query%3D%22" +
            sQuery +
            "%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    };

// Result data passed as object for easy access from custom formatter.
    oAC.resultTypeList = false;
    // Customize formatter to show thumbnail images
    oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
        return "<a href='+%20oResultData.link%20+%20'>" + sResultMatch + "</a>";
    };

// Stub for form validation
    var validateForm = function() {
        // Validation code goes here
        return true;
    };

return {
        oDS: oDS,
        oAC: oAC,
        validateForm: validateForm
    }
})();

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

AutoComplete Control Examples:

More AutoComplete Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.