title: How to do a search function using JavaScript that searches through an XML file?
body: <p>I am trying to utilize a JavaScript function through a HTML page that searches through an XML file, gets a products information by it's attribute value, and then displays all information on that product on the HTML page. I have created the search bar and section where the results will be displayed, and I have the XML file done too. The problem is the JavaScript, I am unsure how to implement this function correctly and have tried several methods to no avail.</p>
  <p>The attribute value I want to use in order to search for the file is the product code, see below for example &quot;product code = 001-01&quot;, I would like to be able to put only the &quot;001-01&quot; in the search bar I've created and the page return all information for that product using JavaScript. I would also like the page to display if the product code does not exist, but this is not <em>absolutely</em> necessary.</p>
  <p>Preferably I would just want to do this using JavaScript, XSLT, XML and HTML - not AJAX or JQuery unless it is absolutely necessary for this but I don't know for sure myself. Apologies for any trouble in advance and thank you for any suggestions, they are very much appreciated.</p>
  <p><strong>XML</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;?xml-stylesheet type = "text/xsl" href = "digitechProducts.xsl"?&gt;
  &lt;productList xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="digitechProducts.xsd"&gt;
     &lt;product code="001-01"&gt;
        &lt;productCategory&gt;Television&lt;/productCategory&gt;
        &lt;productName&gt;Samsung TE8440&lt;/productName&gt;
        &lt;productDescription&gt;50" Ultra HD Crystal View, 
              Smart TV,
              4K HDR Picture,
              x4 HDMI Ports,
              x2 USB Ports,
              WiFi / Ethernet Avaialable&lt;/productDescription&gt;
        &lt;stockQuantity&gt;7&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;500.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="002-01"&gt;
        &lt;productCategory&gt;Bluetooth Speaker&lt;/productCategory&gt;
        &lt;productName&gt;JBL JS7&lt;/productName&gt;
        &lt;productDescription&gt;Wireless Streaming,
              20+ Hours Playtime,
              Waterproof,
              3+ Sound Inputs,
              Bass Radiator&lt;/productDescription&gt;
        &lt;stockQuantity&gt;9&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;180.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="003-01"&gt;
        &lt;productCategory&gt;Gaming Console&lt;/productCategory&gt;
        &lt;productName&gt;PlayStation 4 Pro&lt;/productName&gt;
        &lt;productDescription&gt;4K Gaming,
              1TB Available Storage,
              High Dynamic Range,
              Share, Connect, Play,
              Remote Play,
              Share Play&lt;/productDescription&gt;
        &lt;stockQuantity&gt;2&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;450.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="002-02"&gt;
        &lt;productCategory&gt;Bluetooth Speaker&lt;/productCategory&gt;
        &lt;productName&gt;AKAL GT3303&lt;/productName&gt;
        &lt;productDescription&gt;Wireless Streaming,
              200W,
              5+ Hours Playtime,
              4 Hours Charge Time,
              2+ Sound Inputs&lt;/productDescription&gt;
        &lt;stockQuantity&gt;19&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;125.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="004-01"&gt;
        &lt;productCategory&gt;Laptop&lt;/productCategory&gt;
        &lt;productName&gt;Lenovo IdeaPad 01FFK&lt;/productName&gt;
        &lt;productDescription&gt;Grey Colour,
              14" Screen Size,
              FHD,
              Windows 10,
              128 GB SSD&lt;/productDescription&gt;
        &lt;stockQuantity&gt;15&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;250.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="001-02"&gt;
        &lt;productCategory&gt;Television&lt;/productCategory&gt;
        &lt;productName&gt;LG OO03D&lt;/productName&gt;
        &lt;productDescription&gt;50" Ultra HD Crystal View,
              Smart TV ,
              4K HDR Picture,
              x4 HDMI Ports,
              x2 USB Ports,
              WiFi / Ethernet Avaialable&lt;/productDescription&gt;
        &lt;stockQuantity&gt;4&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;500.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="003-02"&gt;
        &lt;productCategory&gt;Gaming Console&lt;/productCategory&gt;
        &lt;productName&gt;Xbox One S&lt;/productName&gt;
        &lt;productDescription&gt;HD Gaming,
              500GB Available Storage,
              High Dynamic Range,
              Backwards Compatibility,
              Gamepass,
              Gold Membership&lt;/productDescription&gt;
        &lt;stockQuantity&gt;3&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;400.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="002-03"&gt;
        &lt;productCategory&gt;Bluetooth Speaker&lt;/productCategory&gt;
        &lt;productName&gt;TOSHIBA 90112&lt;/productName&gt;
        &lt;productDescription&gt;Wireless Streaming,
              150W,
              4+ Hours Playtime,
              3 Hours Charge Time,
              2+ Sound Inputs&lt;/productDescription&gt;
        &lt;stockQuantity&gt;14&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;75.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="005-01"&gt;
        &lt;productCategory&gt;Apple Technology&lt;/productCategory&gt;
        &lt;productName&gt;IPad Air&lt;/productName&gt;
        &lt;productDescription&gt;Rose Gold,
              64 GB Storage,
              WiFi Connectivity,
              10.9" Liquid Retina Display,
              A14 Bionic Chip&lt;/productDescription&gt;
        &lt;stockQuantity&gt;11&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;300.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="001-03"&gt;
        &lt;productCategory&gt;Television&lt;/productCategory&gt;
        &lt;productName&gt;Samsung K01223&lt;/productName&gt;
        &lt;productDescription&gt;70" Ultra HD,
              Smart TV,
              8K Picture Quality,
              x4 HDMI Ports,
              x4 USB Ports,
              WiFi / Ethernet Avaialable&lt;/productDescription&gt;
        &lt;stockQuantity&gt;3&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;800.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="001-04"&gt;
        &lt;productCategory&gt;Television&lt;/productCategory&gt;
        &lt;productName&gt;Samsung 0K4440&lt;/productName&gt;
        &lt;productDescription&gt;55" HD,
              Smart TV,
              1080p HD Picture,
              x2 HDMI Ports,
              x2 USB Ports,
              WiFi / Ethernet Avaialable&lt;/productDescription&gt;
        &lt;stockQuantity&gt;7&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;500.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="006-01"&gt;
        &lt;productCategory&gt;Android Technology&lt;/productCategory&gt;
        &lt;productName&gt;Google Pixel 4A&lt;/productName&gt;
        &lt;productDescription&gt;5.81" Display,
              6GB RAM,
              128 GB Storage,
              Full HD Resolution,
              12.2MP&lt;/productDescription&gt;
        &lt;stockQuantity&gt;17&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;550.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="006-02"&gt;
        &lt;productCategory&gt;Android Technology&lt;/productCategory&gt;
        &lt;productName&gt;Samsung Galaxy Tab A8&lt;/productName&gt;
        &lt;productDescription&gt;Quad Core Processor,
              32 GB Storage,
              1 Year Warranty,
              Black,
              15" Display&lt;/productDescription&gt;
        &lt;stockQuantity&gt;8&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;150.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="007-01"&gt;
        &lt;productCategory&gt;Camera&lt;/productCategory&gt;
        &lt;productName&gt;Fujifilm Instax Mini 11&lt;/productName&gt;
        &lt;productDescription&gt;Automatic Exposure,
              Self Portrait Mode,
              Ultimate Customization,
              Fashionable Design&lt;/productDescription&gt;
        &lt;stockQuantity&gt;19&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;150.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="004-02"&gt;
        &lt;productCategory&gt;Laptop&lt;/productCategory&gt;
        &lt;productName&gt;MacBook Pro&lt;/productName&gt;
        &lt;productDescription&gt;White Colour,
              18" Screen Size,
              32GB RAM,
              Macintosh OS,
              250 GB SSD&lt;/productDescription&gt;
        &lt;stockQuantity&gt;6&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;500.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="008-01"&gt;
        &lt;productCategory&gt;PC Monitor&lt;/productCategory&gt;
        &lt;productName&gt;ViewSonic VG2756&lt;/productName&gt;
        &lt;productDescription&gt;4K Ultra HD Display,
              27" Screen Size,
              IPS Panel Type,
              16:9 Aspect Ratio,
              5ms Response Time&lt;/productDescription&gt;
        &lt;stockQuantity&gt;2&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;450.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="006-03"&gt;
        &lt;productCategory&gt;Android Technology&lt;/productCategory&gt;
        &lt;productName&gt;OnePlus 8 Pro&lt;/productName&gt;
        &lt;productDescription&gt;120HZ Fluid Display,
              8GB RAM,
              256 GB Storage,
              Full HD Resolution,
              48 MP Quad&lt;/productDescription&gt;
        &lt;stockQuantity&gt;12&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;200.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="008-02"&gt;
        &lt;productCategory&gt;PC Monitor&lt;/productCategory&gt;
        &lt;productName&gt;ASUS P9220&lt;/productName&gt;
        &lt;productDescription&gt;1080p HD Display,
              28" Screen Size,
              IPS Panel Type,
              16:9 Aspect Ratio,
              6ms Response Time&lt;/productDescription&gt;
        &lt;stockQuantity&gt;4&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;400.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="003-03"&gt;
        &lt;productCategory&gt;Gaming Console&lt;/productCategory&gt;
        &lt;productName&gt;Nintendo Switch&lt;/productName&gt;
        &lt;productDescription&gt;Hybrid Console,
              32 GB Available Storage,
              Joy-Con Controllers,
              Surround Sound,
              Play With Friends&lt;/productDescription&gt;
        &lt;stockQuantity&gt;18&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;350.00&lt;/unitPrice&gt;
     &lt;/product&gt;
     &lt;product code="008-03"&gt;
        &lt;productCategory&gt;PC Monitor&lt;/productCategory&gt;
        &lt;productName&gt;LG J890KD&lt;/productName&gt;
        &lt;productDescription&gt;4K Ultra HD Display,
              28" Screen Size,
              IPS Panel Type,
              16:9 Aspect Ratio,
              2ms Response Time&lt;/productDescription&gt;
        &lt;stockQuantity&gt;5&lt;/stockQuantity&gt;
        &lt;unitPrice&gt;600.00&lt;/unitPrice&gt;
     &lt;/product&gt;
  &lt;/productList&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>*HTML*
  
  &lt;html&gt;
     &lt;head&gt;
        &lt;META http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
        &lt;link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@700&amp;display=swap" rel="stylesheet"&gt;
        &lt;link href="https://fonts.googleapis.com/css2?family=Heebo&amp;display=swap" rel="stylesheet"&gt;
        &lt;title&gt; DigiTech - Search  &lt;/title&gt;
        &lt;link rel="stylesheet" href="css/framework.css"&gt;
        &lt;link rel="stylesheet" href="css/index.css"&gt;
        &lt;link rel="stylesheet" href="css/search.css"&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div class = "header"&gt;
           &lt;div class = "inner_header"&gt;
              &lt;a href = "index.html"&gt;
                 &lt;div class = "logo_container"&gt;
                    &lt;h1&gt; DigiTech &lt;/h1&gt;
                 &lt;/div&gt;
              &lt;/a&gt;
              &lt;ul class = "navigation"&gt;
                 &lt;a href = "index.html"&gt;
                    &lt;li&gt; Home &lt;/li&gt;
                 &lt;/a&gt;
                 &lt;a href = "products.html"&gt;
                    &lt;li&gt;Products &lt;/li&gt;
                 &lt;/a&gt;
                 &lt;a href = "search.html" class = "currentLink"&gt;
                    &lt;li&gt; Search &lt;/li&gt;
                 &lt;/a&gt;
                 &lt;a href = "mission.html"&gt;
                    &lt;li&gt; Our Mission &lt;/li&gt;
                 &lt;/a&gt;
                 &lt;a href="about.html"&gt;
                    &lt;li&gt; About Us &lt;/li&gt;
                 &lt;/a&gt;
                 &lt;a href="contact.html"&gt;
                    &lt;li&gt; Contact Us &lt;/li&gt;
                 &lt;/a&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class = "body"&gt;
           &lt;h1 id = "searchProd"&gt; Search Products &lt;/h1&gt;
           &lt;label for = "searchText"&gt; To find specific product information, please enter a Product Code (e.g : 004-01) : &lt;/label&gt;
           &lt;input type = "text" id = "searchText" name = "searchBar" required size = "10" placeholder = "Input values here..."&gt;
           &lt;button id = "searchButton" type = "button" &gt; Go! &lt;/button&gt;
           &lt;p id = "result"&gt; Results : &lt;/p&gt;
           &lt;h2 id = "sampleQueries"&gt; Sample Queries &lt;/h2&gt;
           &lt;br&gt;
           &lt;div class = "query1"&gt;
              &lt;h2&gt; All Products &lt;/h2&gt;
              &lt;p&gt; Samsung TE8440 &lt;/p&gt;
              &lt;p&gt; JBL JS7 &lt;/p&gt;
              &lt;p&gt; PlayStation 4 Pro &lt;/p&gt;
              &lt;p&gt; AKAL GT3303 &lt;/p&gt;
              &lt;p&gt; Lenovo IdeaPad 01FFK &lt;/p&gt;
              &lt;p&gt; LG OO03D &lt;/p&gt;
              &lt;p&gt; Xbox One S &lt;/p&gt;
              &lt;p&gt; TOSHIBA 90112 &lt;/p&gt;
              &lt;p&gt; IPad Air &lt;/p&gt;
              &lt;p&gt; Samsung K01223 &lt;/p&gt;
              &lt;p&gt; Samsung 0K4440 &lt;/p&gt;
              &lt;p&gt; Google Pixel 4A &lt;/p&gt;
              &lt;p&gt; Samsung Galaxy Tab A8 &lt;/p&gt;
              &lt;p&gt; Fujifilm Instax Mini 11 &lt;/p&gt;
              &lt;p&gt; MacBook Pro &lt;/p&gt;
              &lt;p&gt; ViewSonic VG2756 &lt;/p&gt;
              &lt;p&gt; OnePlus 8 Pro &lt;/p&gt;
              &lt;p&gt; ASUS P9220 &lt;/p&gt;
              &lt;p&gt; Nintendo Switch &lt;/p&gt;
              &lt;p&gt; LG J890KD &lt;/p&gt;
              &lt;br&gt;
           &lt;/div&gt;
           &lt;div class = "query2"&gt;
              &lt;h2&gt; All Product Codes &lt;/h2&gt;
              &lt;p&gt;001-01&lt;/p&gt;
              &lt;p&gt;002-01&lt;/p&gt;
              &lt;p&gt;003-01&lt;/p&gt;
              &lt;p&gt;002-02&lt;/p&gt;
              &lt;p&gt;004-01&lt;/p&gt;
              &lt;p&gt;001-02&lt;/p&gt;
              &lt;p&gt;003-02&lt;/p&gt;
              &lt;p&gt;002-03&lt;/p&gt;
              &lt;p&gt;005-01&lt;/p&gt;
              &lt;p&gt;001-03&lt;/p&gt;
              &lt;p&gt;001-04&lt;/p&gt;
              &lt;p&gt;006-01&lt;/p&gt;
              &lt;p&gt;006-02&lt;/p&gt;
              &lt;p&gt;007-01&lt;/p&gt;
              &lt;p&gt;004-02&lt;/p&gt;
              &lt;p&gt;008-01&lt;/p&gt;
              &lt;p&gt;006-03&lt;/p&gt;
              &lt;p&gt;008-02&lt;/p&gt;
              &lt;p&gt;003-03&lt;/p&gt;
              &lt;p&gt;008-03&lt;/p&gt;
              &lt;br&gt;
           &lt;/div&gt;
           &lt;div class = "query3"&gt;
              &lt;h2&gt; All Stock Quantities &lt;/h2&gt;
              &lt;p&gt; 7 &lt;/p&gt;
              &lt;p&gt; 9 &lt;/p&gt;
              &lt;p&gt; 2 &lt;/p&gt;
              &lt;p&gt; 19 &lt;/p&gt;
              &lt;p&gt; 15 &lt;/p&gt;
              &lt;p&gt; 4 &lt;/p&gt;
              &lt;p&gt; 3 &lt;/p&gt;
              &lt;p&gt; 14 &lt;/p&gt;
              &lt;p&gt; 11 &lt;/p&gt;
              &lt;p&gt; 3 &lt;/p&gt;
              &lt;p&gt; 7 &lt;/p&gt;
              &lt;p&gt; 17 &lt;/p&gt;
              &lt;p&gt; 8 &lt;/p&gt;
              &lt;p&gt; 19 &lt;/p&gt;
              &lt;p&gt; 6 &lt;/p&gt;
              &lt;p&gt; 2 &lt;/p&gt;
              &lt;p&gt; 12 &lt;/p&gt;
              &lt;p&gt; 4 &lt;/p&gt;
              &lt;p&gt; 18 &lt;/p&gt;
              &lt;p&gt; 5 &lt;/p&gt;
              &lt;br&gt;
           &lt;/div&gt;
           &lt;div class = "query4"&gt;
              &lt;h2&gt; All Unit Prices &lt;/h2&gt;
              &lt;p&gt; 500.00 &lt;/p&gt;
              &lt;p&gt; 180.00 &lt;/p&gt;
              &lt;p&gt; 450.00 &lt;/p&gt;
              &lt;p&gt; 125.00 &lt;/p&gt;
              &lt;p&gt; 250.00 &lt;/p&gt;
              &lt;p&gt; 500.00 &lt;/p&gt;
              &lt;p&gt; 400.00 &lt;/p&gt;
              &lt;p&gt; 75.00 &lt;/p&gt;
              &lt;p&gt; 300.00 &lt;/p&gt;
              &lt;p&gt; 800.00 &lt;/p&gt;
              &lt;p&gt; 500.00 &lt;/p&gt;
              &lt;p&gt; 550.00 &lt;/p&gt;
              &lt;p&gt; 150.00 &lt;/p&gt;
              &lt;p&gt; 150.00 &lt;/p&gt;
              &lt;p&gt; 500.00 &lt;/p&gt;
              &lt;p&gt; 450.00 &lt;/p&gt;
              &lt;p&gt; 200.00 &lt;/p&gt;
              &lt;p&gt; 400.00 &lt;/p&gt;
              &lt;p&gt; 350.00 &lt;/p&gt;
              &lt;p&gt; 600.00 &lt;/p&gt;
              &lt;br&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="footer"&gt;
           &lt;div class="inner-footer"&gt;
              &lt;div class="footer-section privacypolicy"&gt;
                 &lt;a href = "privacy.html" id="btnFooter"&gt;
                    &lt;p&gt;Privacy Policy&lt;/p&gt;
                 &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="footer-section termsandcondition"&gt;
                 &lt;a href = "termsandconditions.html" id="btnFooter"&gt;
                    &lt;p&gt;Terms &amp; Conditions&lt;/p&gt;
                 &lt;/a&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>