YUI Library Home

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

AutoComplete Control: Centering AutoComplete On a Page

This example points to Yahoo! Search Web Services. Custom CSS rules have been applied to achieve the shrink-wrapped, centered search module.

Sample Code

CSS:

1/* custom styles for centered example */ 
2body, h1 { margin:0;padding:0} /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */ 
3label { 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:

1YAHOO.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 | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

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.

Reload with logging
and debugging disabled.

More AutoComplete Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings