Brian Mains Blog

Yahoo Local Search Integration Part 4: Using a Table

 I'd recommend reading the other posts in the series first to see how the process built-up to this point.  At this point, we have a working solution, but it's not the prettiest.  So the focus is on using a table to display a better format.  The core structure definition is the table in the following form.  The table is hard-coded like the following.

<table cellspacing="0" border="0" class="DataTable">
 <thead>
  <tr class="DataTableHeaderItem">
   <th>Name</th>
   <th>Address</th>
   <th>Phone</th>
   <th>Map</th>
  </tr>
 </thead>
 <tbody id="searchresults"></tbody>
</table>

The results are essentially rendered in the body of the table; this body is cleared/re-created with every new resultset.  The core function to display the results in the table, displayResults, has been updated to look like the following:

function displayResults(yahooResults, parent) {
 while (parent.hasChildNodes())
  parent.removeChild(parent.firstChild);

 var resultSet = yahooResults.ResultSet;

 for (var resultIndex in resultSet.Result) {
  var result = resultSet.Result[resultIndex];

  var row = parent.insertRow();
  row.insertCell().innerHTML = result.Title;
  row.insertCell().innerHTML = result.Address + "<br/>" +
   result.City + "<br/>" + result.State;
  row.insertCell().innerHTML = result.Phone;

  row.insertCell().innerHTML = "<a href='" + result.MapUrl + "' target='_blank'>View Map</a>";
 }

 $("#searchresults > tr:even").addClass("DataTableItem");
 $("#searchresults > tr:odd").addClass("DataTableAlternateItem");
}

This method simply clears all of the row results, inserts the new content, and styles it appropriately.  Let's look at it in chunks.

 while (parent.hasChildNodes())
  parent.removeChild(parent.firstChild);

This code removes all of the TR tags within the body, using the hasChildNodes method to check for children, and firstChild to get the first child.

 var resultSet = yahooResults.ResultSet;

 for (var resultIndex in resultSet.Result) {
  var result = resultSet.Result[resultIndex];
  .
  .
}

Yahoo uses the ResultSet object to represent the search results, and each record in the array is found in the Result property.  When looping using the for (var) notation, each row loops through and the variable represents the index, not the actual object.  This is a variation from .NET and other structured languages.

  var row = parent.insertRow();
  row.insertCell().innerHTML = result.Title;
  row.insertCell().innerHTML = result.Address + "<br/>" +
   result.City + "<br/>" + result.State;
  row.insertCell().innerHTML = result.Phone;

  row.insertCell().innerHTML = "<a href='" + result.MapUrl + "' target='_blank'>View Map</a>";

The actual rows/cells is generated via the insertRow and insertCell methods.  These methods actually return an instance of the row/cell (in older browsers, this may not be the case) for which the content is added to.  The Yahoo client-side API has a Title, Address, City, State, and Phone properties, amongst many others.

Lastly, to make it more useful, a URL reference to the map is generated through a hyperlink, using the string-based approach (assigning a string to the innerHTML property, instead of using the DOM to generate an anchor element).  Both options are available to you to use in your code.

Lastly, I used JQuery to style the table, which makes it super easy using the following code:

 $("#searchresults > tr:even").addClass("DataTableItem");
 $("#searchresults > tr:odd").addClass("DataTableAlternateItem");

The :even and :odd designations make it easy to create the item/alt. item setup.  The #searchresults statement references the TBODY tag, for which a class is applied to its rows (hierarchy specified using the > character).

For styling, the table contains the DataTable style, the header row has the DataTableHeaderItem style, and the rows have DataTableItem/DataTableAlternateItem.  My styles were kind of weak, simply used for demo purposes.  If someone would like to suggest an alternative styles that would look much better, please go ahead and comment.

 .DataTable
{
 
}

.DataTable td
{
 vertical-align:top;
 padding-left:10px;
 padding-right:10px;
}

.DataTable th
{
 vertical-align:top;
 padding-left:10px;
 padding-right:10px;
}

.DataTableHeaderItem
{
 background-color:Navy;
 color:White;
 font-weight:bold;
}

.DataTableItem
{
 background-color:LightYellow;
 color:Navy;
}

.DataTableItem a
{
 color:Navy;
 text-decoration:underline;
}

.DataTableAlternateItem
{
 background-color:CornflowerBlue;
 color:SmokeWhite;
}

.DataTableAlternateItem a
{
 color:White;
 text-decoration:underline;
}