YUI recommends YUI 3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

YUI Library Home

YUI Library Examples: DataTable Control: Datatable with Autocomplete

DataTable Control: Datatable with Autocomplete

This example uses two AutoComplete Controls to populate a DataTable with data received via XHR from the Yahoo! Local webservice. Each AutoComplete is tied to a FunctionDataSource that do not themselves fetch data, but process the user's input string to generate a request to the DataTable's DataSource, which ultimately makes the webservice request for data.

View example in new window.

Phone
City
Data error.

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    height: 25px; 
3} 
4#dt_input, #dt_input_zip { 
5    position: static; 
6    width: 300px; 
7} 
8#dt_input_zip { 
9    width: 60px; 
10} 
11/* This hides the autocomplete drop downs */ 
12#dt_ac_container, #dt_ac_zip_container { 
13    display: none; 
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            success: myDataTable.onDataReturnInitializeTable, 
18            failure: myDataTable.onDataReturnInitializeTable, 
19            scope: myDataTable 
20        }); 
21        return null; 
22    }; 
23    var getTerms = function(query) { 
24        myDataSource.sendRequest('datatable=yes&query=' + query + '&zip=' + Dom.get('dt_input_zip').value + queryString, { 
25            success: myDataTable.onDataReturnInitializeTable, 
26            failure: myDataTable.onDataReturnInitializeTable, 
27            scope: myDataTable 
28        }); 
29        return null; 
30    }; 
31 
32    Event.onDOMReady(function() { 
33        zip = Dom.get('dt_input_zip').value; 
34         
35        var oACDS = new YAHOO.util.FunctionDataSource(getTerms); 
36        oACDS.queryMatchContains = true; 
37        var oAutoComp = new YAHOO.widget.AutoComplete("dt_input","dt_ac_container", oACDS); 
38         
39 
40        var oACDSZip = new YAHOO.util.FunctionDataSource(getZip); 
41        oACDSZip.queryMatchContains = true; 
42        var oAutoCompZip = new YAHOO.widget.AutoComplete("dt_input_zip","dt_ac_zip_container", oACDSZip); 
43        //Don't query until we have 5 numbers for the zip code 
44        oAutoCompZip.minQueryLength = 5; 
45 
46        var formatUrl = function(elCell, oRecord, oColumn, sData) { 
47            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>"; 
48        }; 
49 
50        var formatRating = function(elCell, oRecord, oColumn, sData) { 
51            elCell.innerHTML = (sData === null) ? "N/A" : YAHOO.util.Number.format(sData); 
52        }; 
53 
54        var myColumnDefs = [ 
55            { key:"Title", 
56                label:"Name", 
57                sortable:true, 
58                formatter: formatUrl 
59            }, 
60            { key:"Phone" }, 
61            { key:"City" }, 
62            { key:"Rating.AverageRating", 
63                label:"Rating", 
64                formatter:formatRating, 
65                sortable:true 
66            } 
67        ]; 
68 
69        myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?"); 
70        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
71        myDataSource.connXhrMode = "queueRequests"; 
72        myDataSource.responseSchema = { 
73            resultsList: "ResultSet.Result", 
74            fields: [ 
75                "Title", 
76                "Phone", 
77                "City", 
78                { 
79                    key: "Rating.AverageRating", 
80                    parser:"number" 
81                }, 
82                "ClickUrl" 
83            ] 
84        }; 
85 
86        myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs, 
87            myDataSource, {initialRequest: 'datatable=yes&query=' + Dom.get('dt_input').value + '&zip=' + Dom.get('dt_input_zip').value + queryString }); 
88 
89    }); 
90})(); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More DataTable Control Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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