Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: AutoComplete Control: Use AutoComplete with Flickr's XML Webservice

# AutoComplete Control: Use AutoComplete with Flickr's XML Webservice

This example uses a DataSource that points to Flickr Web Services; Flickr 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 to format the result data into images in HTML. Automatic highlighting of the first result item in the container has been disabled by setting `autoHighlight` to `false`.

View example in new window.

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

## Sample Code

CSS:

/* custom styles for scrolling container */ .flickrautocomplete { width:25em; /* 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>Enter Flickr tags to find a photo (separate with commas):</h3> <div class="flickrautocomplete"> <input id="flickrinput" type="text"> <div id="flickrcontainer"></div> </div>

JavaScript:

YAHOO.example.ACFlickr = new function() { // Instantiate an XHR DataSource and define schema as an array: // ["ResultNodeName", // "QueryKeyAttributeOrNodeName", // "AdditionalParamAttributeOrNodeName1", // ... // "AdditionalParamAttributeOrNodeNameN"] this.oACDS = new YAHOO.widget.DS_XHR("assets/php/flickr_proxy.php", ["photo", "title", "id", "owner", "secret", "server"]); this.oACDS.scriptQueryParam = "tags"; this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML; this.oACDS.maxCacheEntries = 0; this.oACDS.scriptQueryAppend = "method=flickr.photos.search"; // Instantiate AutoComplete this.oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', this.oACDS); this.oAutoComp.autoHighlight = false; this.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='flickrImg'> " + sTitle; return (sMarkup); }; };

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### AutoComplete Control Examples:

- Query a JavaScript Array for In-memory Data
- Query a JavaScript Function for In-memory Data
- Use AutoComplete to access the Yahoo! Search JSON API
- Use AutoComplete to access the Yahoo! Search XML API
- Use AutoComplete to access flat-file data from a web service
- Use AutoComplete with Flickr's XML Webservice
- Proxyless AutoComplete pointing to the Yahoo! Search API
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor (beta))
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control (beta))
- Complex Application (included with examples for Layout Manager (beta))

### 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