YUI Library Examples: DataTable Control: Datatable with Autocomplete

Sample Code for this Example

Data:

{"ResultSet":{
    "totalResultsAvailable":665,
    "totalResultsReturned":10,
    "firstResultPosition":1,
    "ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-",
    "Result":[{
        "Title":"Pizza Depot",
        "Address":"919 E Duane Ave",
        "City":"Sunnyvale",
        "State":"CA",
        "Phone":"(408) 245-7760",
        "Latitude":"37.388537",
        "Longitude":"-122.003972",
        "Rating":{
            "AverageRating":"3.5",
            "TotalRatings":"5",
            "TotalReviews":"5",
            "LastReviewDate":"1161495667"},
        "Distance":"0.93",
        "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
        "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
        "MapUrl":"http:\/\/maps.yahoo.com\/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021",
        "BusinessUrl":"http:\/\/pizza-depot.com\/",
        "BusinessClickUrl":"http:\/\/pizza-depot.com\/"},

...
    ]}
}

CSS:

Markup:

JavaScript:

(function() {
    var Dom = YAHOO.util.Dom,
    Event = YAHOO.util.Event,
    queryString = '&results=20&output=json',
    zip = null,
    myDataSource = null,
    myDataTable = null;

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 = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
        };

var formatRating = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = (sData === null) ? "N/A" : YAHOO.util.Number.format(sData);
        };

var myColumnDefs = [
            { key:"Title",
                label:"Name",
                sortable:true,
                formatter: formatUrl
            },
            { key:"Phone" },
            { key:"City" },
            { key:"Rating.AverageRating",
                label:"Rating",
                formatter:formatRating,
                sortable:true
            }
        ];

myDataSource = new YAHOO.util.DataSource("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 Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

DataTable Control Examples:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.