title: Why are no results detected in my searchbox?
body: <p>can someone help me to detect the issue of my searchbox. I made a searchbox in javascript that proofs the input with a defined keyword list. If a word is matching, then the &quot;HARMI-SOIL 8.0/15 Result Box&quot; should show up, if it does not match the Result Box should stay hidden (display:none).</p>
  <p>My Issue is that after typing in a matching word and klicking enter, the Result Box does not show up. Javascript tells me the word are not matching, even though they should. Just when I click on the cross (x) and deleting the input the Result Box shows up and Javascript tells me the words are matching. I am grateful about any hint. Thank you very much!</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>var wordsHarmi = [
      "Bodenhilfsstoff",
      "Dünger","Duenger",
      "Harmi",
      "Soil",
      "Harmi-Soil",
      "Boden",
      "Mineralien",
      "Wurzelwachstum",
      "Nährstoffe", "Naehrstoffe",
  ]
  
  let harmiSuche = document.getElementById('harmi-suche')
  const inputSearch = document.getElementById('input-suche');
  
  inputSearch.addEventListener('search', (event) =&gt; {
      const searchString = event.target.value.toLowerCase();
      console.log(event);
  
      
      // Iterate over words array to find the input value
      for (let index = 0; index &lt; wordsHarmi.length; index++) {
  
          console.log("works");
          
          const wordFound =     wordsHarmi[index].toLowerCase() ==searchString;
  
          if(wordFound){
              console.log("Word found");
              harmiSuche.style.display = 'flex';
          }
          
          else {
          harmiSuche.style.display = 'none';
          console.log("Word not found");
          }
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #harmi-suche{
          display: none;
      }
      .col-1 {width: 100%;}
      .device-margin-left{
          margin-left: 5.625%;
      }
      .device-margin-right{
          margin-right: 5.625%;
      }
      .column{
          display: flex;
          flex-direction: column;
      }
  
  
      .sans-serif-caption{
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          font-size: 0.75em;
          line-height: 1.375em;
          font-weight: normal;
          color:#444342;
          text-decoration: none;
      }
      .search{
          display: flex;
          flex-direction: row;
          width: 40%;
          height: auto;
          border: 1px solid #444342;
          opacity: 1;
          align-items: center;
          padding:1%;
      }
      .mobile-search{
          display: flex;
          flex-direction: row;
          height: auto;
          border: 1px solid #444342;
          opacity: 1;
          /*align-items: center;*/
          align-content:space-between ;
          padding:1%;
         /* margin-left:7%;*/
          margin-right: 7%;
      }
      .mobile-search input{
          border: none;
          background-color: #F5EAAB;
          width: 100%;
          text-transform: uppercase;
      }
      .page-search{
          display: flex;
          flex-direction: row;
          width: 100%;
          height: auto;
          border: 1px solid #444342;
          opacity: 1;
          align-items: center;
          padding:1%;
      }
      .page-search input{
          width: 100%;
          border: none;
      }
      .page-search input:focus{
          border: none;
      }
      .suchergebnis{
          display: flex;
          flex-direction: row;
          margin-top: 10%;
          margin-bottom: 10%;
          /*justify-content: center;*/
      }
  
  
      .kachel3{
          display: flex;
          flex-direction: row;
          align-items: left;
          padding:1%;
          border: 4px solid #BF9D1D ;
          border-radius: 3%;
          margin-top: 3%;
          /*margin-left: 1%;*/
          background-color: #FFFEF9;
          box-shadow: 0px 3px 10px #00000026;
          height: auto; 
      }
      .standardbutton-anordnung{
          display: flex;
          flex-direction: row;
          align-items: flex-end;
      }
      .standardbutton{
          width:auto;
          height: auto;
          border: 1px solid #444342;
          align-items: center;
          background-color: #FFFEF9;
          text-transform: uppercase;
          padding: 1%;
      }
      .standardbutton:hover{
          color: #BF9D1D;
          border: 1px solid #BF9D1D;
      }
      .standardbutton:focus{
          color: #BF9D1D;
          border: 1px solid #BF9D1D;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="sucheingabe" class=" suchergebnis col-1"&gt;
      &lt;li class="col-3"&gt;&lt;/li&gt;
      
          &lt;div class="page-search sans-serif-text-mobil"&gt;
              &lt;input type="search" placeholder="Was suchst du?" id="input-suche"&gt;
              &lt;image src="media/search-24px.svg" alt="search-icon" /&gt;
          &lt;/div&gt;
      
      &lt;li class="col-3"&gt;&lt;/li&gt;
  &lt;/div&gt;
  
  &lt;div id="suchfilter" class="column"&gt;
  
  
          &lt;div id="harmi-suche" class="item kachel3 device-margin-right device-margin-left"&gt;
              &lt;div class="column" style="width: 100%;"&gt;
                  &lt;h3 class="serif-heading-3"&gt;HARMI-SOIL 8.0/15&lt;/h3&gt;
                  &lt;p class="sans-serif-caption"&gt;HARMI-Soil 8.0/15 ist ein mineralischer Bodenhilfsstoff auf Basis von Gesteinsmehl und natürlichen Zusätzen, die zu 90% aus Produktionsresten bestehen und  deshalb nicht extra hergestellt werden müssen.&lt;/p&gt;
                  &lt;div class="standardbutton-anordnung col-1" style="justify-content: flex-end; margin-top: 2%;"&gt;
                      &lt;button class="standardbutton sans-serif-caption"&gt;&lt;a href="./harmi-soil.html"&gt;Mehr erfahren&lt;/a&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>