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%20and%20api_key%3D1895311ec0d2e23431a6407f3e8dffcc";
    };

// 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
    };
}();

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

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.

YUI Library Examples: AutoComplete Control: Find Photos on Flickr

AutoComplete Control: Find Photos on Flickr

Selections

Sample Code

YUI Logger Output:

AutoComplete Control Examples:

More AutoComplete Control Resources: