Example: AutoComplete - Flickr XML (YUI Library)

This example uses a DataSource that points to Flickr Web Services, which returns XML data via a simple PHP proxy. In order to return valid data from the Flickr application, scriptQueryParameter has been customized to be "tags", and scriptQueryAppend is used to pass in additional required arguments. The cache has been disabled so that each query is forced to make a trip to the live application.

This instance of AutoComplete defines a robust custom formatResult function that parses result data into custom HTML markup that displays an actual image from the Flickr server. Automatic highlighting of the first result item in the container has been disabled by setting autoHighlight to false.

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.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 :: Flickr XML

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

Sample Code