This example uses two AutoComplete Controls to populate a DataTable with data received via XHR from the Yahoo! Local webservice.
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 | 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 | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings