YUI Library JavaScript DHTML


            

    
Datatable with Autocomplete

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














Datatable with Autocomplete


  This example uses two AutoComplete Controls to populate a DataTable with data received via XHR from the Yahoo! Local webservice.




    #autocomplete, #autocomplete_zip {
        height: 25px;
    }
    #dt_input, #dt_input_zip {
        position: static;
        width: 300px;
    }
    #dt_input_zip {
        width: 60px;
    }
    #dt_ac_container, #dt_ac_zip_container {
        display: none;
    }


    Search Term:



    Zip Code: 
    



(function() {
    var Dom = YAHOO.util.Dom,
    Event = YAHOO.util.Event,
    queryString = '&results=20&output=json',
    zip = null,
    myDataSource = null,
    myDataTable = null;
    var getZip = function(query) {
        query = parseInt(query, 10);
        if (!YAHOO.lang.isNumber(query)) {
            query = zip;
            Dom.get('dt_input_zip').value = zip;
            YAHOO.log('Invalid zip code, must be a number', 'warn', 'example');
        }
        myDataSource.sendRequest('datatable=yes&zip=' + query + '&query=' + Dom.get('dt_input').value + queryString,
            myDataTable.onDataReturnInitializeTable, myDataTable);        
    };
    var getTerms = function(query) {
        myDataSource.sendRequest('datatable=yes&query=' + query + '&zip=' + Dom.get('dt_input_zip').value + queryString,
        myDataTable.onDataReturnInitializeTable, myDataTable);
    };
    Event.onDOMReady(function() {
        zip = Dom.get('dt_input_zip').value;
        
        var oACDS = new YAHOO.util.FunctionDataSource(getTerms);
        oACDS.queryMatchContains = true;
        var oAutoComp = new YAHOO.widget.AutoComplete("dt_input","dt_ac_container", oACDS);
        
        var oACDSZip = new YAHOO.util.FunctionDataSource(getZip);
        oACDSZip.queryMatchContains = true;
        var oAutoCompZip = new YAHOO.widget.AutoComplete("dt_input_zip","dt_ac_zip_container", oACDSZip);
        //Don't query until we have 5 numbers for the zip code
        oAutoCompZip.minQueryLength = 5;
        var formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "" + sData + "";
        };
        var myColumnDefs = [
            { key:"Title",
                label:"Name",
                sortable:true,
                formatter: formatUrl
            },
            { key:"Phone" },
            { key:"City" },
            { key:"Rating.AverageRating",
                label:"Rating",
                formatter:YAHOO.widget.DataTable.formatNumber, 
                sortable:true
            }
        ];
        myDataSource = new YAHOO.util.DataSource("yui_2.7.0b-assets/datatable-assets/php/ylocal_proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.connXhrMode = "queueRequests";
        myDataSource.responseSchema = {
            resultsList: "ResultSet.Result",
            fields: [
                "Title",
                "Phone",
                "City",
                {
                    key: "Rating.AverageRating",
                    parser:"number"
                },
                "ClickUrl"
            ]
        };
        myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
            myDataSource, {initialRequest: 'datatable=yes&query=' + Dom.get('dt_input').value + '&zip=' + Dom.get('dt_input_zip').value + queryString });
    });
})();




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