YUI Library Examples: AutoComplete Control: Find Photos on Flickr

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.ACFlickr = function() {
    // Set up a local proxy to the Flickr webservice
    var myDS = new YAHOO.util.XHRDataSource("assets/php/flickr_proxy.php");
    myDS.responseSchema = {
        resultNode: "photo",
        fields: ["title", "id", "owner", "secret", "server"]
    };
    myDS.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
    myDS.maxCacheEntries = 100;
    
    // Instantiate AutoComplete
    var myAC = new YAHOO.widget.AutoComplete("flickrinput","flickrcontainer", myDS);
    myAC.resultTypeList = false;
    myAC.suppressInputUpdate = true;
    myAC.generateRequest = function(sQuery) {
        return "?method=flickr.photos.search&tags="+sQuery;
    };
    var getImgUrl = function(oPhoto, sSize) {
        var sId = oPhoto.id;
        var sSecret = oPhoto.secret;
        var sServer = oPhoto.server;
        var sUrl = "http://static.flickr.com/" +
            sServer +
            "/" +
            sId +
            "_" +
            sSecret +
            "_"+ (sSize || "s") +".jpg";
        return "<img src='" + sUrl + "' class='flickrImg'>";
    }
    
    myAC.formatResult = function(oResultItem, sQuery) {
        // This was defined by the schema array of the data source
        var sTitle = oResultItem.title;
        var sMarkup = getImgUrl(oResultItem) + " " + sTitle;
        return (sMarkup);
    };
    myAC.itemSelectEvent.subscribe(function(sType, aArgs){
        var oPhoto = aArgs[2];
        YAHOO.util.Dom.get("photos").innerHTML = 
            "<p>"+getImgUrl(oPhoto, "m")+"</p>"+YAHOO.util.Dom.get("photos").innerHTML
    });
    
    return {
        oDS: myDS,
        oAC: myAC
    };
}();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: AutoComplete Control: Find Photos on Flickr

Sample Code

Configuration for This Example

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources:

YUI Library Examples: AutoComplete Control: Find Photos on Flickr

AutoComplete Control: Find Photos on Flickr

Selections

Sample Code

Configuration for This Example

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: