YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction.t




    
Configurations Dashboard

/*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 this example */
#dashboard_autocomplete {margin:0 1em 0 0;width:40%;height:4em;}/* set width and height of widget here*/




Configurations Dashboard



  

This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction.  The first field after the AutoComplete input textbox is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it.  The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes feel in the browser.


      



Search the Web Using Yahoo!'s Search API:



  
  




  
  

Use the Controls Below to Customize the Behavior of the AutoComplete Instance Above:


    
    
        
        
        

            
            Animate Horizontally
        

        

            
            Animate Vertically
        

        

            Animation Speed: 
            
            
        

        

            
            Use Shadow
        

        

            
            Use IFrame
        

        

            
            Automatically Highlight First Item
        

        

            
            Type Ahead
        

        

            
            Force a Selection
        

        

            Maximum Results: 
            
            
        

        

            Minimum Query Length: 
            
            
        

        

            Query Delay: 
            
            
        

        

            TypeAhead Delay: 
            
            
        

        

            Delimiter Character(s) like ; or [";", ","]

            
            
        

        

            Highlight Classname

            
            
        

        

            Pre-highlight Classname

            
            
        

        

            
            Allow Browser Autocomplete
        

        

            
            Always Show Container
        

        

            Set Header
            

            
        

        

            Set Body
            

            
        

        

            Set Footer
            

            
        

    


YAHOO.example.Dashboard = function() {
return {
    myDataSource: null,
    myAutoComp: null,
    
    // Initialize widgets and the dashboard
    init:  function() {
        // DataSource
        this.myDataSource = new YAHOO.util.XHRDataSource("yui_2.7.0b-assets/autocomplete-assets/php/ysearch_flat.php");
        this.myDataSource.responseSchema = {
             recordDelim: "\n",
             fieldDelim: "\t"
        };
        this.myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
        // AutoComplete
        this.myAutoComp = new YAHOO.widget.AutoComplete("dashboard_input","dashboard_container", this.myDataSource);
        // IFrame workaround for IE
        var ua = navigator.userAgent.toLowerCase();
        if(YAHOO.env.ua.ie < 7) {
            this.myAutoComp.useIFrame = true;
            YAHOO.util.Dom.get("useIFrame").checked = true;
        }
        // Dashboard DOM event handling (assign scope to the HTML Element)
        YAHOO.util.Event.addListener("animHoriz","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("animVert","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("useShadow","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("useIFrame","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("autoHighlight","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("typeAhead","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("forceSelection","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("allowBrowserAutocomplete","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("alwaysShowContainer","click",this.handleCheckboxEvent,this);
        YAHOO.util.Event.addListener("animSpeed","click",this.handleNumberInputEvent,this);
        YAHOO.util.Event.addListener("maxResultsDisplayed","click",this.handleNumberInputEvent,this);
        YAHOO.util.Event.addListener("minQueryLength","click",this.handleNumberInputEvent,this);
        YAHOO.util.Event.addListener("queryDelay","click",this.handleNumberInputEvent,this);
        YAHOO.util.Event.addListener("typeAheadDelay","click",this.handleNumberInputEvent,this);
        
        YAHOO.util.Event.addListener("delimChar","click",this.handleDelimiterInputEvent,this);
        YAHOO.util.Event.addListener("highlightClassName","click",this.handleTextInputEvent,this);
        YAHOO.util.Event.addListener("prehighlightClassName","click",this.handleTextInputEvent,this);
        YAHOO.util.Event.addListener("setHeader","click",this.handleTextareaEvent,this);
        YAHOO.util.Event.addListener("setBody","click",this.handleTextareaEvent,this);
        YAHOO.util.Event.addListener("setFooter","click",this.handleTextareaEvent,this);
    },
    
    // For valid inputs
    updateValue: function(property, value) {
        this.myAutoComp[property] = value;
        this.logSuccess(property);
    },
    // For invalid inputs
    revertInput: function(property) {
        YAHOO.util.Dom.get(property+"Input").value = this.myAutoComp[property];
        this.logFailure(property);
    },
    
    // Log success message
    logSuccess: function(property) {
        YAHOO.log("Updated " + property + " to " + this.myAutoComp[property] + ".", "info", "example");
    },
    // Log failure message
    logFailure: function(property, error) {
        YAHOO.log("Could not update " + property + ".", "warn","example");
    },
    // DOM event handler (scope assigned to the HTML Element)
    handleCheckboxEvent: function(e, oSelf) {
        var property = this.id;
        oSelf.updateValue(property, this.checked);
        
        if(oSelf.myAutoComp.useShadow && oSelf.myAutoComp.alwaysShowContainer) {
            YAHOO.log("The AutoComplete properties useShadow and alwaysShowContainer should not be enabled concurrently.","warn","example")
        }
    },
    
    // DOM event handler (scope assigned to the HTML Element)
    handleNumberInputEvent: function(e, oSelf) {
        var property = this.id;
        
        // Validate input
        var nValue = YAHOO.util.Dom.get(property+"Input").value*1;
        if(YAHOO.lang.isNumber(nValue)) {
            oSelf.updateValue(property, nValue);
        }
        else {
            oSelf.revertInput(property);
        }
    },
    
    // DOM event handler (scope assigned to the HTML Element)
    handleDelimiterInputEvent: function(e, oSelf) {
        var property = this.id;
        
        // Validate input
        var sValue = YAHOO.util.Dom.get(property+"Input").value;
        if((sValue.indexOf("[") == 0) &&
                (sValue.indexOf("]") == sValue.length-1) &&
                (sValue.indexOf("<") < 0) &&
                (sValue.indexOf(">") < 0)) {
            // Ok to turn into an array
            try {
                sValue = eval(sValue);
            }
            catch(e) {
                // Not ok
                oSelf.revertInput(property);
                return;
            }
        }
        else if(sValue.length !== 1){
            // Not ok
            oSelf.revertInput(property);
            return;
        }
        oSelf.updateValue(property, sValue);
    },
    
    // DOM event handler (scope assigned to the HTML Element)
    handleTextInputEvent: function(e, oSelf) {
        var property = this.id;
        oSelf.updateValue(property, YAHOO.util.Dom.get(property+"Input").value);
    },
    // DOM event handler (scope assigned to the HTML Element)
    handleTextareaEvent: function(e, oSelf) {
        var method = this.id;
        var value = YAHOO.util.Dom.get(method+"Input").value;
        switch(method) {
            case "setHeader":
                oSelf.myAutoComp.setHeader(value);
                break
            case "setBody":
                oSelf.myAutoComp.setBody(value);
                break;
            case "setFooter":
                oSelf.myAutoComp.setFooter(value);
                break;
        }
        YAHOO.log("Called " + method + "() with " + value, "info", "example");
    }
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.Dashboard.init, YAHOO.example.Dashboard, true);





   
  
yui_2.7.0b.zip( 4,431 k)