Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Proxyless AutoComplete pointing to the Yahoo! Search API

# AutoComplete Control: Proxyless AutoComplete pointing to the Yahoo! Search API

This AutoComplete instance uses a Script Node type of DataSource in order to retrieve data from a cross-domain server, Yahoo!'s Audio Search API, without the need for a proxy. The webservice must support a "callback" parameter, which the AutoComplete widget will use to pass in its internal callback function. The DataSource schema is defined to parse the return data for fields named "Name" and "Thumbnail" (in order to display a thumbnail image to the user).

View example in new window.

### Yahoo! Audio Search:

## Sample Code

CSS:

/* custom styles for this implementation */ #ysearchautocomplete { margin-bottom:2em;width:25em;} #ysearchautocomplete .result {position:relative;height:62px;} #ysearchautocomplete .name {position:absolute;bottom:0;left:64px;} #ysearchautocomplete .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;} #ysearchautocomplete .imgtext {position:absolute;width:58px;top:50%;text-align:center;} #ysearchautocomplete img {width:60px;height:60px;margin-right:4px;}

Markup:

<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.ACScriptNode.validateForm();"> <h3>Yahoo! Audio Search:</h3> <div id="ysearchautocomplete"> <input id="ysearchinput" type="text" name="p"> <div id="ysearchcontainer"></div> </div> </form>

JavaScript:

YAHOO.example.ACScriptNode = new function(){ // Instantiate an Script Node DataSource and define schema as an array: // ["Multi-depth.object.notation.to.find.a.single.result.item", // "Query Key", // "Additional Param Name 1", // ... // "Additional Param Name n"] this.oACDS = new YAHOO.widget.DS_ScriptNode("http://search.yahooapis.com/AudioSearchService/V1/artistSearch?appid=YahooDemo&output=json", ["ResultSet.Result","Name","Thumbnail"]); this.oACDS.scriptQueryParam = "artist"; // Instantiate AutoComplete this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS); this.oAutoComp.queryDelay = 0; this.oAutoComp.formatResult = function(oResultItem, sQuery) { var img = "", nonimg = ""; var oThumbnail = oResultItem[1]; if(oThumbnail && (oThumbnail !== "")) { img = "<img src=\""+ oThumbnail.Url + "\">"; } else { img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>"; } return "<div class=\"result\">" + img + " <span class=\"name\">" + oResultItem[0] + "</span></div>"; }; // Stub for form validation this.validateForm = function() { // Validation code goes here return true; }; };

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