Список фильтров поиска независимо от порядка слов при строгости поиска - PullRequest
Новая
       6

Список фильтров поиска независимо от порядка слов при строгости поиска

1 голос
/ 12 марта 2020

Мне удалось решить эту проблему https://user-images.githubusercontent.com/26569942/56949597-f8f6f280-6b50-11e9-8521-bfd1235126d9.gif. Теперь я могу искать независимо от порядка слов, но фильтр поиска показывает много результатов, и не так строго, как я хочу, чтобы он был . Я разместил нижеприведенный фрагмент кода, чтобы лучше продемонстрировать мою проблему. Если вы введете «Correy» в строке поиска, он будет правильно отображать все результаты со словом «Correy» в нем. Однако, если я хочу найти специфицированный c Корри, я не смогу. Например, введите «Корри Адель» в строку поиска. Он все равно покажет все результаты 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>
<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>

1 Ответ

0 голосов
/ 12 марта 2020

Вы можете взять другой vaiable и установить его на 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>
...