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

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

    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>