YUI Library Home

Site Search (YDN & YUIBlog):

# 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. To achieve the shrink-wrapped, centered search module, custom CSS rules have been applied, and the method `doBeforeExpandContainer` has been customized to position the container directly below the input field.

View example in new window.

Yahoo! Search:

## Sample Code

CSS:

/* custom styles for centered example */ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */ #ysearch { text-align:center; } #ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */ #ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */

Markup:

<form action="http://search.yahoo.com/search"> <div id="ysearch"> <label>Yahoo! Search: </label> <input id="ysearchinput" type="text" name="p"> <input id="ysearchsubmit" type="submit" value="Submit Query"> <div id="ysearchcontainer"></div> </div> </form>

JavaScript:

YAHOO.example.Centered = function() { var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php?output=json&"); myDataSource.responseSchema = { resultsList: "ResultSet.Result", fields: ["Title"] }; // Instantiate AutoComplete var myAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", myDataSource); myAutoComp.queryMatchContains = true; myAutoComp.queryQuestionMark = false; myAutoComp.useShadow = true; // Keeps container centered myAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) { var pos = YAHOO.util.Dom.getXY(oTextbox); pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2; YAHOO.util.Dom.setXY(oContainer,pos); return true; }; return { oDS: myDataSource, oAC: myAutoComp }; }();

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### AutoComplete Control Examples:

- Basic Local Data
- Basic Remote Data
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combo Box
- Tagging Example with alwaysShowContainer
- Custom Function to Search Different Fields at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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