过滤确切的词

Question

我有一个过滤器可以过滤在 div 中找到的字母，但我需要它来过滤搜索中所写的确切单词，但我无法让它工作。这是我的代码。

     $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#List li").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });

这是搜索字段： <input id="myInput" type="text" placeholder="Search">

卡片的html：

<li>
<div class="masonry" id="List" style="list-style-type:none;">
<div class="column" style="width: rem">
    <div class="col s12 m7 ">
      <div class="card">
        <div class="card-image" style="text-align: center">
          <img style="padding: 0.3em; " src="#"><p1></p1> </div> <---img src (p1 is the name of the town)
        <div class="card-content" style="color: black">
          <p1><h6>#</h6> <br>  <--- Title of the card
<i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp; Vojni put 2.deo 293a, Zemun, Beograd<br>
<i class="fas fa-phone"></i>&nbsp;&nbsp;011/408 5510; 065/403 7365 <br>
<i class="fas fa-envelope"></i>&nbsp;&nbsp;dom.najmiliji@gmail.com   <br> 
<br> <br>
>Text description of a column goes here<        
</p1>
      </div>
        <div class="card-action">
        
           <a href="#" target="_blank"><i class="fab fa-facebook-square fa-3x" style="color: dodgerblue; "></i></a>
            
       <a href="#" target="_blank"><i class="fab fa-internet-explorer fa-3x" style="color:rgba(57,171,235,1.00); "></i></a>         
            
        </div>
      </div>
    </div>
  </div> 
</li>

所以基本上我需要它来查找

中的确切字母顺序

。

搜索：ris

春节ris没问题， Reposting 不是。

Answer 1

请试试这个

function searching() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="myInput" onkeyup="searching()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Tetris</a></li>
  <li><a href="#">Reposting</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

我显示搜索结果的示例列表