YUI Library Examples: AutoComplete Control: Find Photos on Flickr

Sample Code

CSS:

Markup:

JavaScript:

YAHOO.example.ACFlickr = function() {
    // Set up a local proxy to YQL
    var myDS = new YAHOO.util.XHRDataSource("assets/php/yql_proxy.php?format=xml&q=select%20*%20from%20flickr.photos.search");
    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 "%20where%20tags%3D%22"+sQuery+"%22";
    };

// Helper function to generate the img tag
    var getImgMarkup = function(oPhoto, sSize) {
        var sUrl = "http://static.flickr.com/" +
            oPhoto.server +
            "/" +
            oPhoto.id +
            "_" +
            oPhoto.secret +
            "_"+ (sSize || "s") +".jpg";
        return '<img src="' + sUrl + '" class="flickrImg" alt="' + oPhoto.title + '">';
    };

// Helper function to generate the link tag
    var getImgLink = function(oPhoto) {
        return '<a href="http://www.flickr.com/photos/' + oPhoto.owner + "/" + oPhoto.id + '">';
    };

// Custom formatting to display photos in the suggestions container
    myAC.formatResult = function(oResultItem, sQuery) {
        // This was defined by the schema array of the data source
        var sTitle = oResultItem.title,
            sMarkup = getImgMarkup(oResultItem) + " " + sTitle;
        return (sMarkup);
    };

// Selecting a photo adds it to the selections area
    myAC.itemSelectEvent.subscribe(function(sType, aArgs){
        var oPhoto = aArgs[2];
        YAHOO.util.Dom.get("photos").innerHTML =
            '<p>' + getImgLink(oPhoto) +
                getImgMarkup(oPhoto, "m")+'</a></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: