YUI Library Examples: AutoComplete Control: Use AutoComplete with Flickr's XML Webservice

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.ACFlickr = new function() {
    // Instantiate an XHR DataSource and define schema as an array:
    //     ["ResultNodeName",
    //     "QueryKeyAttributeOrNodeName",
    //     "AdditionalParamAttributeOrNodeName1",
    //     ...
    //     "AdditionalParamAttributeOrNodeNameN"]
    this.oACDS = new YAHOO.widget.DS_XHR("assets/php/flickr_proxy.php",
        ["photo", "title", "id", "owner", "secret", "server"]);
    this.oACDS.scriptQueryParam = "tags";
    this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
    this.oACDS.maxCacheEntries = 0;
    this.oACDS.scriptQueryAppend = "method=flickr.photos.search";

// Instantiate AutoComplete
    this.oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', this.oACDS);
    this.oAutoComp.autoHighlight = false;
    this.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='flickrImg'> " + sTitle;
        return (sMarkup);
    };
};

YUI Library Examples: AutoComplete Control: Use AutoComplete with Flickr's XML Webservice

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources:

YUI Library Examples: AutoComplete Control: Use AutoComplete with Flickr's XML Webservice

AutoComplete Control: Use AutoComplete with Flickr's XML Webservice

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

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: