YUI Library Examples: AutoComplete Control: Custom Formatting, with a Proxyless Remote DataSource

Sample Code

Data:


1	{"ResultSet":
2	{"totalResultsAvailable":"48",
3	"totalResultsReturned":10,
4	"firstResultPosition":1,
5	"Result": [
6	{"Name":"Foo Fighters",
7	"Thumbnail":{
8	"Url":"http:\/\/thm-audio.image.search.vip.re3.yahoo.com\/image\/1899911147",
9	"Height":40,
10	"Width":60},
11	"RelatedArtists":[
12	{"id":"GB307626e70fbbed31b96072543be71667","content":"Alice In Chains"},
13	{"id":"GB95d7f729355f5ae35931a3db866d8f6e","content":"Babes In Toyland"}]
14	}
15
16	...
17	]}
18	}
	view plain \| print \| ?

CSS:


1	#myAutoComplete {
2	width:30em; /* set width here or else widget will expand to fit its container */
3	padding-bottom:2em;
4	}
5	/* styles for custom formatting */
6	.yui-ac .result {position:relative;height:62px;}
7	.yui-ac .name {position:absolute;bottom:0;left:64px;}
8	.yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;}
9	.yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;}
10	.yui-ac 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.CustomFormatting.validateForm();">
2	<h3>Yahoo! Audio Search:</h3>
3	<div id="myAutoComplete">
4	<input id="myInput" type="text" name="p">
5	<div id="myContainer"></div>
6	</div>
7	</form>
	view plain \| print \| ?

JavaScript:


1	YAHOO.example.CustomFormatting = (function(){
2	// Instantiate DataSource
3	var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/AudioSearchService/V1/artistSearch");
4	oDS.responseSchema = {
5	resultsList: "ResultSet.Result",
6	fields: ["Name","Thumbnail"]
7	};
8	// Setting to default value for demonstration purposes.
9	// The webservice needs to support execution of a callback function.
10	oDS.scriptCallbackParam = "callback";
11
12	// Instantiate AutoComplete
13	var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);
14	// The webservice needs custom parameters
15	oAC.generateRequest = function(sQuery) {
16	return "?appid=YahooDemo&output=json&artist=" + sQuery ;
17	};
18
19	// Stub for form validation
20	var validateForm = function() {
21	// Validation code goes here
22	return true;
23	};
24
25	return {
26	oDS: oDS,
27	oAC: oAC,
28	validateForm: validateForm
29	}
30	})();
	view plain \| print \| ?