YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Find Photos on Flickr

# AutoComplete Control: Find Photos on Flickr

This example uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The `generateRequest()` method has been customized in order send additional required parameters to the Flickr application. The `formatResult()` method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a `itemSelectEvent` handler has been defined to collect selected images in a separate container.

View example in new window.

### Find photos by tag and collect your selections:

##### Selections

## Sample Code

CSS:

#flickrselections { float:right; width:240px; padding:10px; background-color:#FFA928; } #flickrselections h5 { color:#009; margin:0; } /* custom styles for scrolling container */ #flickrautocomplete { width:15em; /* set width of widget here */ padding-bottom:2em; } #flickrautocomplete .yui-ac-content { max-height:30em;overflow:auto;overflow-x:hidden; /* set scrolling */ _height:30em; /* ie6 */ } #flickrautocomplete .flickrImg { width:6em;height:6em;padding:.1em;vertical-align:middle; }

Markup:

<h3>Find photos by tag and collect your selections:</h3> <div id="flickrselections"> <h5>Selections</h5> <div id="photos"></div> </div> <div id="flickrautocomplete"> <input id="flickrinput" type="text"> <div id="flickrcontainer"></div> </div>

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

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### AutoComplete Control Examples:

- Basic Local Data
- Basic Remote Data
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combo Box
- Tagging Example with alwaysShowContainer
- Custom Function to Search Different Fields at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings