YUI Library JavaScript DHTML


            



    
Centering AutoComplete On a Page

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}











/* 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: */




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.




    
    Yahoo! Search:



  

YAHOO.example.Centered = function() {
    var myDataSource = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-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_2.7.0b.zip( 4,431 k)