YUI Library Examples: AutoComplete Control: Centering AutoComplete On a Page

Sample Code

CSS:


1	/* custom styles for centered example */
2	body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */
3	label { color:#E76300;font-weight:bold;}
4	#ysearch { text-align:center; }
5	#ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */
6	#ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */
	view plain \| print \| ?

Markup:


1	<form action="http://search.yahoo.com/search">
2	<div id="ysearch">
3	<label for="ysearchinput">Yahoo! Search: </label>
4	<input id="ysearchinput" type="text" name="p">
5	<input id="ysearchsubmit" type="submit" value="Submit Query">
6	<div id="ysearchcontainer"></div>
7	</div>
8	</form>
	view plain \| print \| ?

JavaScript:


1	YAHOO.example.Centered = function() {
2	var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php?output=json&");
3	myDataSource.responseSchema = {
4	resultsList: "ResultSet.Result",
5	fields: ["Title"]
6	};
7
8	// Instantiate AutoComplete
9	var myAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", myDataSource);
10	myAutoComp.queryMatchContains = true;
11	myAutoComp.queryQuestionMark = false;
12	myAutoComp.useShadow = true;
13
14	return {
15	oDS: myDataSource,
16	oAC: myAutoComp
17	};
18	}();
	view plain \| print \| ?

INFO 102ms (+68) 6:53:37 PM:
LogReader  instance0
LogReader initialized

INFO 34ms (+3) 6:53:37 PM:

AutoComplete instance0 ysearchinput

AutoComplete initialized

INFO 31ms (+31) 6:53:37 PM:
DataSource  instance0
DataSource initialized

INFO 0ms (+0) 6:53:37 PM:
global
Logger initialized

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