Yahoo! Developer Network Home - Help

YDN Site Search

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

### More AutoComplete Control Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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