Yahoo! Developer Network Home - Help

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:

1/* custom styles for scrolling container */ 
2#flickrautocomplete { 
3    width:25em; /* set width of widget here */ 
4    padding-bottom:2em; 
5} 
6#flickrautocomplete .yui-ac-content { 
7    max-height:30em;overflow:auto;overflow-x:hidden; /* set scrolling */ 
8    _height:30em; /* ie6 */ 
9} 
10#flickrautocomplete .flickrImg { 
11    width:6em;height:6em;padding:.1em;vertical-align:middle; 
12} 
view plain | print | ?

Markup:

1<h3>Enter Flickr tags to find a photo (separate with commas):</h3> 
2<div class="flickrautocomplete"> 
3    <input id="flickrinput" type="text"> 
4    <div id="flickrcontainer"></div> 
5</div> 
view plain | print | ?

JavaScript:

1YAHOO.example.ACFlickr = new function() { 
2    // Instantiate an XHR DataSource and define schema as an array: 
3    //     ["ResultNodeName", 
4    //     "QueryKeyAttributeOrNodeName", 
5    //     "AdditionalParamAttributeOrNodeName1", 
6    //     ... 
7    //     "AdditionalParamAttributeOrNodeNameN"] 
8    this.oACDS = new YAHOO.widget.DS_XHR("assets/php/flickr_proxy.php", 
9        ["photo", "title", "id", "owner", "secret", "server"]); 
10    this.oACDS.scriptQueryParam = "tags"; 
11    this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML; 
12    this.oACDS.maxCacheEntries = 0; 
13    this.oACDS.scriptQueryAppend = "method=flickr.photos.search"; 
14 
15    // Instantiate AutoComplete 
16    this.oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', this.oACDS); 
17    this.oAutoComp.autoHighlight = false; 
18    this.oAutoComp.formatResult = function(oResultItem, sQuery) { 
19        // This was defined by the schema array of the data source 
20        var sTitle = oResultItem[0]; 
21        var sId = oResultItem[1]; 
22        var sOwner = oResultItem[2]; 
23        var sSecret = oResultItem[3]; 
24        var sServer = oResultItem[4]; 
25        var sUrl = "http://static.flickr.com/" + 
26            sServer + 
27            "/" + 
28            sId + 
29            "_" + 
30            sSecret + 
31            "_s.jpg"; 
32        var sMarkup = "<img src='" + sUrl + "' class='flickrImg'> " + sTitle; 
33        return (sMarkup); 
34    }; 
35}; 
view plain | print | ?

YUI Logger Output:

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

Reload with logging
and debugging enabled.

More AutoComplete Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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