Search Filter List irrespective of word order issue with search strictness

Alex Krs :

I managed to fix this issue https://user-images.githubusercontent.com/26569942/56949597-f8f6f280-6b50-11e9-8521-bfd1235126d9.gif . I can now search irrespective of word order , but the search filter shows a lot of results and it is not as strict as I want it to be . I posted a runnable code snippet below to better demonstrate my issue. If you type "Correy" in the search bar it will correctly display all results with the word "Correy" in it. However, if I want to search for a specific Correy , I wont be able to. Type "Correy Adele" in the search bar for instance. It will still show all the Corey results as it did previously. I dont want this to happen. Any suggestions ?

function myFunction() {

var filter =  $('input').val().toUpperCase().split(' ');
var li = $('li');
var a = $('a');
var ul;
var txtValue;
ul = document.getElementById("myUL");
for (var i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    for(var f = 0; f < filter.length; f++) {
        if (txtValue.toUpperCase().indexOf(filter[f]) > -1 ) {    
            li[i].style.display = '';
           // don't need further matches
        } else {
            li[i].style.display = 'none';
        }
        break;
    }
}

}

<style>
* {
  box-sizing: border-box;
}

#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;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

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

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

  <li><a href="#">Calvin Green</a></li>
  <li><a href="#">Christina Correy</a></li>
  <li><a href="#">Cindy Correy</a></li>
</ul>

Nina Scholz :

You could take another vaiable and set it to true and iterate the filter words and switch off unwanted items at the end.

match = true;

for (var f = 0; f < filter.length && match; f++) { // exit loop if not match
    match = txtValue.includes(filter[f]);
}

li[i].style.display = match ? '' : 'none';

function myFunction() {
  var filter = $('input').val().toUpperCase().split(/\s+/); 
  var li = $('li');
  var a = $('a');
  var ul;
  var txtValue;
  ul = document.getElementById("myUL");
  var match
  
  
  for (var i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = (a.textContent || a.innerText).toUpperCase();
    
    match = true;

    for (var f = 0; f < filter.length && match; f++) {
        match = txtValue.includes(filter[f]);
    }

    li[i].style.display = match ? '' : 'none';
  }
}

<style>* {
  box-sizing: border-box;
}

#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;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

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

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

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

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

  <li><a href="#">Calvin Green</a></li>
  <li><a href="#">Christina Correy</a></li>
  <li><a href="#">Cindy Correy</a></li>
</ul>