Figure 10

The Result Display Structure

All search results will be contained in the searchResults <div> element under the search form on the web page. Using the DOM functions, the data from the response will appended to HTML elements inside the list container <div>, which itself will be appended as a child node of the searchResults <div> element. The structure of the HTML element hierarchy is displayed in Figure 10 above. An excerpt of the corresponding code in the callback function is listed below.

The Search Result Container

var amzJSONCallback = function(tmpData)
{
   // Set Result Count Variable
   var count = 0;

   // Set Container Div Elements for Results
   var gDiv = getEl('searchResults');
   gDiv.innerHTML = "";

   // Clear any previous results
   var sa_listTop = cel('div');
   sa_listTop.setAttribute("id", "sa_listTop");
   var scoller = cel('div');
   scoller.setAttribute("id", "scoller");
   var iDiv = cel('div');
   iDiv.setAttribute("id", "products");

   // Amazon Logo Display
   var viewOptions = cel('div');
   viewOptions.setAttribute("id", "viewOptions");
   var amzlogo = cel('img');
   amzlogo.setAttribute('src', './images/amazon_sm2.png');
   amzlogo.setAttribute('alt', 'amazon.com tutorial');
   amzlogo.cssText = "border:0px;height:20px;width:104px";
   viewOptions.appendChild(amzlogo);
   .
   .
   .
  // Loop for each Result Item
   for(i = 0; i < tmpData.ItemSet.Item.length - 1;
   i ++ )
   {
      // Update Result Count
      count ++ ;
      .
      .  // Individual Item Information goes here
      .
    }
   if(count != 0)
   {
      // Build Result List
      sa_listTop.appendChild(viewOptions);
      sa_listTop.appendChild(sortBy);
      sa_listTop.appendChild(scoller);
      .
      .
      .
      sa_listTop.appendChild(pagination);
      gDiv.appendChild(sa_listTop);
      gDiv.appendChild(cel('p'));
   }
   else // If there are no results
   {
      gDiv.appendChild(ctn("sorry, no results found for '" + getEl('asch').value + "'"));
      gDiv.appendChild(cel('p'));
   }
}

The above code is intended to show the code governing the creation of the results container structure in the DOM – it is not the completed code for either the container or the search results.

The “For” loop contains the code for appending the data of each individual product item to the DOM. Each item data will reside within separate container <div> elements: ‘productsContainer’ and ‘productsContent’.

Next, we’ll examine the code for creating these individual item containers.