title: Search XML with JavaScript and Display Results in Table
body: <p>For my course, I have been asked to create a html page that has the functionality of allowing a user to enter the first name of a contact, which onsubmit, loads an xml file I previously created, loops through the contacts until it matches the first name entered by the user, and displays the contact information, except the email address, on the same page, in a table with headings and a <code>&lt;h1&gt;</code> displaying The contact details are:. If there is no match, there should be a <code>&lt;h2&gt;</code> that says The contact does not exist.</p>
  
  <p>The following is my XML file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;?xml-stylesheet type="text/xsl" href="Contact.xsl" ?&gt;
  &lt;!DOCTYPE contact SYSTEM "contact.dtd"&gt;
  &lt;contact&gt;
      &lt;person&gt;
          &lt;name&gt;
              &lt;firstname&gt;Bob&lt;/firstname&gt;
              &lt;lastname&gt;Jones&lt;/lastname&gt;
          &lt;/name&gt;
          &lt;phone&gt;(02)44 42 45 63&lt;/phone&gt;
          &lt;address&gt;
              &lt;street&gt;34 Highway Road&lt;/street&gt;
              &lt;city&gt;Grovedale&lt;/city&gt;
              &lt;state&gt;NSW&lt;/state&gt;
              &lt;postcode&gt;3228&lt;/postcode&gt;
              &lt;email&gt;bob.jones@email.com&lt;/email&gt;
          &lt;/address&gt;
      &lt;/person&gt;
      &lt;person&gt;
          &lt;name&gt;
              &lt;firstname&gt;Gary&lt;/firstname&gt;
              &lt;lastname&gt;Williams&lt;/lastname&gt;
          &lt;/name&gt;
          &lt;phone&gt;(02)44 41 87 56&lt;/phone&gt;
          &lt;address&gt;
              &lt;street&gt;223 Yarra Avenue&lt;/street&gt;
              &lt;city&gt;Branston&lt;/city&gt;
              &lt;state&gt;NSW&lt;/state&gt;
              &lt;postcode&gt;2317&lt;/postcode&gt;
              &lt;email&gt;gary.williams@email.com&lt;/email&gt;
          &lt;/address&gt;
      &lt;/person&gt;
  </code></pre>
  
  <p>I have tried a few things, but I have no idea how I would get the data to display in a table. The following is my XSL file which is how I assume they want the table to be shown, but with the results of the search.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;&lt;!-- DWXMLSource="Contact.xml" --&gt;
  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  &lt;xsl:template match="/"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
  }
  div {
      margin-left: 150px;
      margin-right: 20px;
      margin-top: 50px;
      width: 80%;
  }
  h1 {
      font-size: 24px;
      color: #F00;
  }
  .headings {
      background-color: #06F;
  }
  .data {
      background-color: #6F9;
  }
  .table {
      border: 2px solid #F00;
      width: 100%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
  &lt;h1&gt;CONTACTS&lt;/h1&gt;
      &lt;table class="table"&gt;
          &lt;tr class="headings"&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;Street&lt;/th&gt;
              &lt;th&gt;City&lt;/th&gt;
              &lt;th&gt;State&lt;/th&gt;
              &lt;th&gt;Postcode&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
          &lt;/tr&gt;
          &lt;xsl:for-each select="contact/person"&gt;
          &lt;tr class="data"&gt;
              &lt;td&gt;&lt;xsl:value-of select="name/firstname"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;xsl:value-of select="name/lastname"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;xsl:value-of select="address/street"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;xsl:value-of select="address/city"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;xsl:value-of select="address/state"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;xsl:value-of select="address/postcode"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;xsl:value-of select="address/email"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/xsl:for-each&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>I have to use JavaScript to search the XML file and create a table displaying the results from the search.</p>
  
  <p>The HTML I have is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Task 2&lt;/title&gt;
  &lt;script language="JavaScript" type="text/javascript"&gt;
  window.onload = loadIndex;
  function loadIndex()
  {
      if (document.implementation &amp;&amp; document.implementation.createDocument)
      {
          xmlDoc = document.implementation.createDocument("", "", null);
          xmlDoc.load("Contact.xml");
      }
      else if (window.ActiveXObject)
      {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async = "false";
          xmlDoc.load("Contact.xml");
      }
  }
  function searchIndex()
  {
      if (!xmlDoc)
      {
          loadIndex();
      }
      var searchterm = document.getElementById("searchme").value;
      var allitems = xmlDoc.getElementsByTagName("firstname");
      results = new Array;
      for (var i=0;i&lt;allitems.length;i++)
      {
          var name = allitems[i].lastChild.nodeValue;
          var exp = new RegExp(searchterm,"i");
          if ( name.match(exp) != null)
          {
              results.push(allitems[i]);
          }
      }
      showResults(results, searchterm);
  }
  function showResults(results, searchterm)
  {
      //insert table data here to be displayed
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  First Name: &lt;input type="text" name="firstname" id="searchme"&gt;
  &lt;br /&gt;
  &lt;input type="submit" value="Search" onClick="searchIndex(); return false;"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, I have no idea where to start. I know I would load the XML file, then gather the first name tag, then somehow compare the two then display the results.</p>
  
  <p>I have seen the following, and this is similar to what I am after, but I cant get the results to display in a table.
  <a href="http://www.dzone.com/snippets/simple-javascriptxml-based" rel="noreferrer">http://www.dzone.com/snippets/simple-javascriptxml-based</a></p>
  
  <p>Thanks for the help.</p>