YUI Library Examples: AutoComplete Control: Customizing Remote Requests

Sample Code

Data:


1	{"ResultSet":
2	{"totalResultsAvailable":"22000000",
3	"totalResultsReturned":5,
4	"firstResultPosition":1,
5	"Result": [
6	{"Title":"foo",
7	"Summary":"... When foo' is used in connection with bar' it has generally traced...",
8	"Url":"http:\/\/www.catb.org\/~esr\/jargon\/html\/F\/foo.html",
9	"ModificationDate":1072684800,
10	"MimeType":"text\/html"
11	},
12
13	{"Title":"Foo Fighters",
14	"Summary":"Official site with news, tour dates, discography, store, community, and more.",
15	"Url":"http:\/\/www.foofighters.com\/",
16	"ModificationDate":1138521600,
17	"MimeType":"text\/html"
18	}
19
20	...
21	]}
22	}
	view plain \| print \| ?

CSS:


1	#myAutoComplete {
2	width:40em; /* set width here or else widget will expand to fit its container */
3	padding-bottom:2em;
4	}
	view plain \| print \| ?

Markup:

JavaScript:


1	YAHOO.example.RemoteCustomRequest = function() {
2	// Use an XHRDataSource
3	var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php");
4	// Set the responseType
5	oDS.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
6	// Define the schema of the JSON results
7	oDS.responseSchema = {
8	resultsList : "ResultSet.Result",
9	fields : ["Title"]
10	};
11
12	// Instantiate the AutoComplete
13	var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
14	// Throttle requests sent
15	oAC.queryDelay = .5;
16	// The webservice needs additional parameters
17	oAC.generateRequest = function(sQuery) {
18	return "?output=json&results=100&query=" + sQuery ;
19	};
20
21	return {
22	oDS: oDS,
23	oAC: oAC
24	};
25	}();
	view plain \| print \| ?