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: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### AutoComplete Control Examples:

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