YUI Library Examples: AutoComplete Control: Use AutoComplete to access the Yahoo! Search XML API

Sample Code

CSS:


1	/* custom styles for this example */
2	#ysearchautocomplete { margin-bottom:2em;width:25em; }
	view plain \| print \| ?

Markup:


1	<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACXml.validateForm();">
2	<h3>Yahoo! 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:


1	YAHOO.example.ACXml = new function(){
2	// Instantiate an XHR 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_XHR("assets/php/ysearch_proxy.php", ["Result", "Title"]);
9	this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
10	this.oACDS.queryMatchContains = true;
11	this.oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
12
13	// Instantiate AutoComplete
14	this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
15
16	// Stub for AutoComplete form validation
17	this.validateForm = function() {
18	// Validation code goes here
19	return true;
20	};
21	};
	view plain \| print \| ?