搜索过滤列表，不考虑搜索严格性的词序问题

Question

我设法解决了这个问题https://user-images.githubusercontent.com/26569942/56949597-f8f6f280-6b50-11e9-8521-bfd1235126d9.gif。我现在可以不考虑词序进行搜索，但搜索过滤器显示大量结果，而且并不像我希望的那么严格。我在下面发布了一个可运行的代码片段，以更好地演示我的问题。如果您在搜索栏中输入“Correy”，它将正确显示包含“Correy”一词的所有结果。但是，如果我想搜索特定的 Correy ，我将无法做到。例如，在搜索栏中输入“Correy Adele”。它仍然会像以前一样显示所有 Corey 结果。我不希望这种事发生。有什么建议 ？

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>

Answer 1

您可以采用另一个变量并将其设置为true并迭代过滤词并在最后关闭不需要的项目。match = true;for (var f = 0; f < filter.length && match; f++) { // exit loop if not match&nbsp; &nbsp; match = txtValue.includes(filter[f]);}li[i].style.display = match ? '' : 'none';function myFunction() {&nbsp; var filter = $('input').val().toUpperCase().split(/\s+/);&nbsp;&nbsp; var li = $('li');&nbsp; var a = $('a');&nbsp; var ul;&nbsp; var txtValue;&nbsp; ul = document.getElementById("myUL");&nbsp; var match&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for (var i = 0; i < li.length; i++) {&nbsp; &nbsp; a = li[i].getElementsByTagName("a")[0];&nbsp; &nbsp; txtValue = (a.textContent || a.innerText).toUpperCase();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; match = true;&nbsp; &nbsp; for (var f = 0; f < filter.length && match; f++) {&nbsp; &nbsp; &nbsp; &nbsp; match = txtValue.includes(filter[f]);&nbsp; &nbsp; }&nbsp; &nbsp; li[i].style.display = match ? '' : 'none';&nbsp; }}<style>* {&nbsp; box-sizing: border-box;}#myInput {&nbsp; background-image: url('/css/searchicon.png');&nbsp; background-position: 10px 12px;&nbsp; background-repeat: no-repeat;&nbsp; width: 100%;&nbsp; font-size: 16px;&nbsp; padding: 12px 20px 12px 40px;&nbsp; border: 1px solid #ddd;&nbsp; margin-bottom: 12px;}#myUL {&nbsp; list-style-type: none;&nbsp; padding: 0;&nbsp; margin: 0;}#myUL li a {&nbsp; border: 1px solid #ddd;&nbsp; margin-top: -1px;&nbsp; /* Prevent double borders */&nbsp; background-color: #f6f6f6;&nbsp; padding: 12px;&nbsp; text-decoration: none;&nbsp; font-size: 18px;&nbsp; color: black;&nbsp; display: block}#myUL li a:hover:not(.header) {&nbsp; 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">&nbsp; <li><a href="#">Adele Correy</a></li>&nbsp; <li><a href="#">Agnes Green</a></li>&nbsp; <li><a href="#">Billy Correy</a></li>&nbsp; <li><a href="#">Bob Green</a></li>&nbsp; <li><a href="#">Calvin Green</a></li>&nbsp; <li><a href="#">Christina Correy</a></li>&nbsp; <li><a href="#">Cindy Correy</a></li></ul>