Filtering exact words

Question

I have a filter that filters the letters found in the div, but I need it to filter the exact words as written in search and I just can't get it to work. Here's my code.

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

This is the search field: <input id="myInput" type="text" placeholder="Search">

html for the card:

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

So basically I need it to look for the exact sequence of letters in

.

Search: ris

Tetris is ok, Reposting is not.

Upvotes: 2

Views: 48

Answer 1

Please try this

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>

I shows example list for search result