如何在输入html时突出显示文字？

Question

我有搜索框，搜索项目名称和项目ID，在侧栏中过滤。

我可以搜索和过滤在搜索框中输入的文字，但无法突出显示已搜索过的文字。

  

这是我到目前为止尝试过的html，css和javascript代码：

搜索框HTML代码

userID   Points
1        91
2        123

      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;
 
    }

请帮我高亮代码

Answer 1

我在你的代码中看到你添加span class="search-found" 但你在你的css不同类中.highlight 那不存在< / strong>
改变你的CSS：

.search-found {

    background-color: red;

    }

＆＃13;

＆＃13;

  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';
      
      }
     }
     }

＆＃13;

.search-found {

    background-color: red;
 
    }

＆＃13;

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<input id="filterInput" class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">



      <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%" >
          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%" >
          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%">
          Project 3
          <div>
            <small>
            ProjectId: 3
          </small>
          </div>
        </a>
        </li>
        
      </ul>
    </div>

＆＃13;

＆＃13;

＆＃13;