AutoComplete Widget :: Customized XML Implementation

DataSource

This DataSource instance points to Flickr Web Services, via a simple PHP proxy. The DataSource schema is defined for XML data. In order to be compatible with the Flickr application, the scriptQueryParameter has been customized to be "tags", and scriptQueryAppend has been defined to pass in additional arguments. Finally, the cache has been disabled so that each query is forced to make a trip to the live source.

AutoComplete

This AutoComplete instance defines a robust formatResult() function that formats the result data into HTML markup that displays an image from Flickr and its title. The autoHighlight feature has additionally been disabled.

Sample Code

CSS:

Markup:

JavaScript:

// Instantiate an XHR DataSource and define schema as an array:

//     ["ResultNodeName",

//     "QueryKeyAttributeOrNodeName",

//     "AdditionalParamAttributeOrNodeName1",

//     ...

//     "AdditionalParamAttributeOrNodeNameN"]

oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",

["photo", "title", "id", "owner", "secret", "server"]);

oACDS.scriptQueryParam = "tags";

oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;

oACDS.maxCacheEntries = 0;

oACDS.scriptQueryAppend = "method=flickr.photos.search";

// Instantiate AutoComplete

oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);

oAutoComp.autoHighlight = false;

oAutoComp.formatResult = function(oResultItem, sQuery) {

// This was defined by the schema array of the data source

var sTitle = oResultItem[0];

var sId = oResultItem[1];

var sOwner = oResultItem[2];

var sSecret = oResultItem[3];

var sServer = oResultItem[4];

var sUrl = "http://static.flickr.com/" +

sServer +

"/" +

sId +

"_" +

sSecret +

"_s.jpg";

var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;

return (sMarkup);

};

AutoComplete Widget :: XML Data Flickr Web Services

DataSource

AutoComplete

Enter Flickr tags to find a photo (separate with commas):

Sample Code