YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Custom Formatting, with a Proxyless Remote DataSource




    
Custom Formatting, with a Proxyless Remote DataSource

/*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;
}









#myAutoComplete {
    width:30em; /* set width here or else widget will expand to fit its container */
    padding-bottom:2em;
}
/* styles for custom formatting */
.yui-ac .result {position:relative;height:62px;}
.yui-ac .name {position:absolute;bottom:0;left:64px;}
.yui-ac .img {position:absolute;top:0;left:0;width:58px;height:58px;border:1px solid black;background-color:black;color:white;}
.yui-ac .imgtext {position:absolute;width:58px;top:50%;text-align:center;}
.yui-ac img {width:60px;height:60px;margin-right:4px;}




Custom Formatting, with a Proxyless Remote DataSource



  

This AutoComplete instance uses a ScriptNodeDataSource to point to the Yahoo! Video Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.


A custom formatter function is defined in order to show thumbnail images in the results container.


      



  

Yahoo! Video Search:


  
    
    

  



YAHOO.example.CustomFormatting = (function(){
    // Instantiate DataSource
    var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/VideoSearchService/V1/videoSearch");
    oDS.responseSchema = {
        resultsList: "ResultSet.Result",
        fields: ["Title","Thumbnail"]
    };
    // Setting to default value for demonstration purposes.
    // The webservice needs to support execution of a callback function.
    oDS.scriptCallbackParam = "callback";
    
    // Instantiate AutoComplete
    var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);
    // The webservice needs custom parameters
    oAC.generateRequest = function(sQuery) {
        return "?appid=YahooDemo&output=json&query=" + sQuery ;
    };
    // Result data passed as object for easy access from custom formatter.
    oAC.resultTypeList = false;
    // Customize formatter to show thumbnail images
    oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
        var img = "", nonimg = "";
        var oThumbnail = oResultData.Thumbnail;
        if(oThumbnail && (oThumbnail !== "")) {
            img = "";
        }
        else {
            img = "N/A";
        }
        return "" + img + " " + sResultMatch + "";
    };
    // Stub for form validation
    var validateForm = function() {
        // Validation code goes here
        return true;
    };
    
    return {
        oDS: oDS,
        oAC: oAC,
        validateForm: validateForm
    }
})();





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