YUI Library Examples: DataTable Control (beta): Datatable with Autocomplete

DataTable Control (beta): Datatable with Autocomplete

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

Name
Phone
City
Rating
Phone
City
Loading data...

Sample Code for this Example

Data:

1{"ResultSet":{ 
2    "totalResultsAvailable":665, 
3    "totalResultsReturned":10, 
4    "firstResultPosition":1, 
5    "ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-", 
6    "Result":[{ 
7        "Title":"Pizza Depot", 
8        "Address":"919 E Duane Ave", 
9        "City":"Sunnyvale", 
10        "State":"CA", 
11        "Phone":"(408) 245-7760", 
12        "Latitude":"37.388537", 
13        "Longitude":"-122.003972", 
14        "Rating":{ 
15            "AverageRating":"3.5", 
16            "TotalRatings":"5", 
17            "TotalReviews":"5", 
18            "LastReviewDate":"1161495667"}, 
19        "Distance":"0.93", 
20        "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", 
21        "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", 
22        "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", 
23        "BusinessUrl":"http:\/\/pizza-depot.com\/", 
24        "BusinessClickUrl":"http:\/\/pizza-depot.com\/"}, 
25 
26        ... 
27    ]} 
28
view plain | print | ?

CSS:

1#autocomplete, #autocomplete_zip { 
2    height25px
3} 
4#dt_input, #dt_input_zip { 
5    positionstatic
6    width300px
7} 
8#dt_input_zip { 
9    width60px
10} 
11/* This hides the autocomplete drop downs */ 
12#dt_ac_container, #dt_ac_zip_container { 
13    displaynone
14} 
view plain | print | ?

Markup:

1<div id="autocomplete"
2    <label for="dt_input">Search Term: </label><input id="dt_input" type="text" value="pizza"
3    <div id="dt_ac_container"></div> 
4</div> 
5<div id="autocomplete_zip"
6    <label for="dt_input_zip">Zip Code: </label><input id="dt_input_zip" type="text" value="94089"
7    <div id="dt_ac_zip_container"></div> 
8</div> 
9<div id="json"></div> 
view plain | print | ?

JavaScript:

1(function() { 
2    var Dom = YAHOO.util.Dom, 
3    Event = YAHOO.util.Event, 
4    queryString = '&results=20&output=json'
5    zip = null
6    myDataSource = null
7    myDataTable = null
8 
9    var getZip = function(query) { 
10        query = parseInt(query, 10); 
11        if (!YAHOO.lang.isNumber(query)) { 
12            query = zip; 
13            Dom.get('dt_input_zip').value = zip; 
14            YAHOO.log('Invalid zip code, must be a number''warn''example'); 
15        } 
16        myDataSource.sendRequest('datatable=yes&zip=' + query + '&query=' + Dom.get('dt_input').value + queryString, 
17            myDataTable.onDataReturnInitializeTable, myDataTable);         
18    }; 
19    var getTerms = function(query) { 
20        myDataSource.sendRequest('datatable=yes&query=' + query + '&zip=' + Dom.get('dt_input_zip').value + queryString, 
21        myDataTable.onDataReturnInitializeTable, myDataTable); 
22    }; 
23 
24    Event.onDOMReady(function() { 
25        zip = Dom.get('dt_input_zip').value; 
26         
27        var oACDS = new YAHOO.widget.DS_JSFunction(getTerms); 
28        oACDS.queryMatchContains = true
29        var oAutoComp = new YAHOO.widget.AutoComplete("dt_input","dt_ac_container", oACDS); 
30         
31 
32        var oACDSZip = new YAHOO.widget.DS_JSFunction(getZip); 
33        oACDSZip.queryMatchContains = true
34        var oAutoCompZip = new YAHOO.widget.AutoComplete("dt_input_zip","dt_ac_zip_container", oACDSZip); 
35        //Don't query until we have 5 numbers for the zip code 
36        oAutoCompZip.minQueryLength = 5; 
37 
38        var formatUrl = function(elCell, oRecord, oColumn, sData) { 
39            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>"
40        }; 
41 
42        var myColumnDefs = [ 
43            { key:"Title"
44                label:"Name"
45                sortable:true
46                formatter: formatUrl 
47            }, 
48            { key:"Phone" }, 
49            { key:"City" }, 
50            { key:"Rating.AverageRating"
51                label:"Rating"
52                formatter:YAHOO.widget.DataTable.formatNumber,  
53                sortable:true 
54            } 
55        ]; 
56 
57        myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?"); 
58        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
59        myDataSource.connXhrMode = "queueRequests"
60        myDataSource.responseSchema = { 
61            resultsList: "ResultSet.Result"
62            fields: [ 
63                "Title"
64                "Phone"
65                "City"
66                { 
67                    key: "Rating.AverageRating"
68                    parser:YAHOO.util.DataSource.parseNumber 
69                }, 
70                "ClickUrl" 
71            ] 
72        }; 
73 
74        myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs, 
75            myDataSource, {initialRequest: 'datatable=yes&query=' + Dom.get('dt_input').value + '&zip=' + Dom.get('dt_input_zip').value + queryString }); 
76 
77    }); 
78})(); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings