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.