title: How to highlight text while typing in html?
body: <p>I have search box that search project name and project id which is filtered in side bar. </p>
  
  <p>I can able to search and filter the text entered in search box but not able highlight text which have searched.</p>
  
  <blockquote>
    <p>Here is the html, css and javascript code which i have tried so far:</p>
  </blockquote>
  
  <p><strong>searchbox html code</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>      var filterInput, ul, li, a, i;
  
      filterInput = document.getElementById('filterInput');
      // Add event listener
      filterInput.addEventListener('keyup', filterNames);
       function filterNames(){
        // Get value of input
        let filterValue = document.getElementById('filterInput').value.toUpperCase();
  
       // Get names ul
        let ul = document.getElementById('projectlist');
   
       // Get lis from ul.
       let li = ul.querySelectorAll('li.nav-item');
  
       // Loop through collection-item list
        for(let i = 0;i &lt; li.length;i++){
         let a = li[i].getElementsByTagName('a')[0];
         // If matched
         if(a.innerHTML.toUpperCase().indexOf(filterValue) &gt; -1){
          li[i].style.display = '';
          var text=a.innerHTML;
          text = text.replace( filterValue, '&lt;span class="search-found"&gt;' + 
       filterValue + '&lt;/span&gt;' );
          a.innerHTML=text;
          
        } else {
         li[i].style.display = 'none';
        
        }
       }
       }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .sidebar .nav-link .highlight {
  
      background-color: #7b9d6f;
   
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"&gt;
  
  Here is the project list html code:
  
        &lt;div id="projectlist" class="sidebar-sticky" &gt;
      &lt;ul class="nav flex-column nav-pills"&gt;
       
        &lt;li class="nav-item" &gt;
          &lt;a name="{{.ProjectID}}" class="nav-link" href="#"&gt;
            &lt;img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png"&gt;
            Project 1
            &lt;div&gt;
              &lt;small&gt;
              ProjectId: 1
            &lt;/small&gt;
            &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
           &lt;li class="nav-item" &gt;
          &lt;a name="{{.ProjectID}}" class="nav-link" href="#"&gt;
            &lt;img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png"&gt;
            Project 2
            &lt;div&gt;
              &lt;small&gt;
              ProjectId: 2
            &lt;/small&gt;
            &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
           &lt;li class="nav-item" &gt;
          &lt;a name="{{.ProjectID}}" class="nav-link" href="#"&gt;
            &lt;img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png"&gt;
            Project 3
            &lt;div&gt;
              &lt;small&gt;
              ProjectId: 3
            &lt;/small&gt;
            &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
          
        &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
  
  
    
   
       </code></pre>
  </div>
  </div>
  </p>
  
  <p>Please Help me the Hightlight the code</p>