This DataSource instance points to Flickr Web Services, via a simple PHP proxy. The DataSource schema is defined for XML data. In order to be compatible with the Flickr application, the scriptQueryParameter has been customized to be "tags", and scriptQueryAppend has been defined to pass in additional arguments. Finally, the cache has been disabled so that each query is forced to make a trip to the live source.
This AutoComplete instance defines a robust formatResult() function that formats the result data into HTML markup that displays an image from Flickr and its title. The autoHighlight feature has additionally been disabled.
CSS:
#flickrmod {position:relative;padding:1em;} #flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/ #flickrinput {position:absolute;width:100%;height:1.4em;} #flickrcontainer {position:absolute;top:1.7em;width:100%;} #flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;z-index:9050;} #flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;} #flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;} #flickrcontainer ul {padding:5px 0;width:100%;} #flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;} #flickrcontainer li.yui-ac-highlight {background:#ff0;}
Markup:
<!-- AutoComplete begins --> <div id="flickrmod"> <form> <h2>Enter Flickr tags to find a photo (separate with commas):</h2> <div id="flickrautocomplete"> <input id="flickrinput"> <div id="flickrcontainer"></div> </div> </form> </div> <!-- AutoComplete ends -->
JavaScript:
// Instantiate data source 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.prototype.TYPE_XML; oACDS.maxCacheEntries = 0; oACDS.scriptQueryAppend = "method=flickr.photos.search"; // Instantiate auto complete 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 = "" + sTitle; return (sMarkup); };