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:

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

Markup:

1<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.ACScriptNode.validateForm();"> 
2    <h3>Yahoo! Audio Search:</h3> 
3    <div id="ysearchautocomplete"> 
4        <input id="ysearchinput" type="text" name="p"> 
5        <div id="ysearchcontainer"></div> 
6    </div> 
7</form> 
view plain | print | ?

JavaScript:

1YAHOO.example.ACScriptNode = new function(){ 
2    // Instantiate an Script Node DataSource and define schema as an array: 
3    //     ["Multi-depth.object.notation.to.find.a.single.result.item", 
4    //     "Query Key", 
5    //     "Additional Param Name 1", 
6    //     ... 
7    //     "Additional Param Name n"] 
8    this.oACDS = new YAHOO.widget.DS_ScriptNode("http://search.yahooapis.com/AudioSearchService/V1/artistSearch?appid=YahooDemo&output=json", ["ResultSet.Result","Name","Thumbnail"]); 
9    this.oACDS.scriptQueryParam = "artist"; 
10 
11    // Instantiate AutoComplete 
12    this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS); 
13    this.oAutoComp.queryDelay = 0; 
14    this.oAutoComp.formatResult = function(oResultItem, sQuery) { 
15        var img = "", nonimg = ""; 
16        var oThumbnail = oResultItem[1]; 
17        if(oThumbnail && (oThumbnail !== "")) { 
18            img = "<img src=\""+ oThumbnail.Url + "\">"; 
19        } 
20        else { 
21            img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>"; 
22        } 
23        return "<div class=\"result\">" + img + " <span class=\"name\">" + oResultItem[0] + "</span></div>"; 
24    }; 
25 
26    // Stub for form validation 
27    this.validateForm = function() { 
28        // Validation code goes here 
29        return true; 
30    }; 
31}; 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO367ms (+2) 11:09:35 AM:
AutoComplete  instance0 ysearchinput
AutoComplete initialized
INFO365ms (+365) 11:09:35 AM:
DataSource  instance0
Script Node DataSource initialized
INFO0ms (+0) 11:09:34 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More AutoComplete Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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