How to highlight text while typing in html?

Question

I have search box that search project name and project id which is filtered in side bar.

I can able to search and filter the text entered in search box but not able highlight text which have searched.

Here is the html, css and javascript code which i have tried so far:

searchbox html 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 < li.length;i++){
       let a = li[i].getElementsByTagName('a')[0];
       // If matched
       if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
        li[i].style.display = '';
        var text=a.innerHTML;
        text = text.replace( filterValue, '<span class="search-found">' + 
     filterValue + '</span>' );
        a.innerHTML=text;
        
      } else {
       li[i].style.display = 'none';
      
      }
     }
     }

  .sidebar .nav-link .highlight {

    background-color: #7b9d6f;
 
    }

  <input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

Here is the project list html code:

      <div id="projectlist" class="sidebar-sticky" >
    <ul class="nav flex-column nav-pills">
     
      <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
          Project 1
          <div>
            <small>
            ProjectId: 1
          </small>
          </div>
        </a>
        </li>
         <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
          Project 2
          <div>
            <small>
            ProjectId: 2
          </small>
          </div>
        </a>
        </li>
         <li class="nav-item" >
        <a name="{{.ProjectID}}" class="nav-link" href="#">
          <img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
          Project 3
          <div>
            <small>
            ProjectId: 3
          </small>
          </div>
        </a>
        </li>
        
      </ul>
    </div>





  
 
     

Please Help me the Hightlight the code

Answer 1

I used hilitor for kinda similar project and it was fine. Simple and open source build with pure JavaScript.

Here is your example.. I've changed your structure a bit:

// Get input element
let 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 lis
    for(let i = 0;i < li.length;i++) {
      	let a = li[i].getElementsByTagName('p')[0];

        // If matched
        if(a.textContent.toUpperCase().indexOf(filterValue) > -1) {
        	li[i].style.display = '';
        } else {
        	li[i].style.display = 'none';
        }
    }
}

// Call Hilitor
var myHilitor2;
document.addEventListener("DOMContentLoaded", function(e) {
	// Set the parent
	myHilitor2 = new Hilitor("nav-item");
	// Text direction
	myHilitor2.setMatchType("left");
}, false);

// Event
document.getElementById("filterInput").addEventListener("keyup", function(e) {
	myHilitor2.apply(this.value);
}, false);

<script src="https://rawgit.com/GerHobbelt/hilitor/master/hilitor.js"></script>

<div id="projectlist" class="sidebar-sticky" >

 <input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

	<ul class="nav flex-column nav-pills">
		<li class="nav-item" >
			<a name="{{.ProjectID}}" class="nav-link" href="#">
				<img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
				<p class="inner">Project 1</p>
			</a>
		</li>
		<li class="nav-item" >
			<a name="{{.ProjectID}}" class="nav-link" href="#">
				<img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
				<p class="inner">Project 2</p>
			</a>
		</li>
		<li class="nav-item" >
			<a name="{{.ProjectID}}" class="nav-link" href="#">
				<img class="img-fluid" style="width:8%" src="../static/image/generic_gcp.png">
				<p class="inner">Project 3</p>
			</a>
		</li>
	</ul>
</div>

Here is the source code and you can learn more about its options in the documentation