YUI Library Examples: AutoComplete Control: Basic Remote Data

Sample Code

Data:

CSS:


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

Markup:


1	<label for="myInput">Search our database:</label>
2	<div id="myAutoComplete">
3	<input id="myInput" type="text">
4	<div id="myContainer"></div>
5	</div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.example.BasicRemote = function() {
2	// Use an XHRDataSource
3	var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php");
4	// Set the responseType
5	oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
6	// Define the schema of the delimited results
7	oDS.responseSchema = {
8	recordDelim: "\n",
9	fieldDelim: "\t"
10	};
11	// Enable caching
12	oDS.maxCacheEntries = 5;
13
14	// Instantiate the AutoComplete
15	var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
16
17	return {
18	oDS: oDS,
19	oAC: oAC
20	};
21	}();
	view plain \| print \| ?