Как проверить значения или частично в массиве, используя входные данные?

Question

Я пытаюсь понять, как я могу сделать частичное совпадение на основе данных, предоставленных пользователем.Перепроверьте это значение inside для ввода в array для любых частичных совпадений, затем добавьте класс display

Например, если я введу в поле ввода следующее:

Создание веб-приложения Джон Джеймс

Он извлечет все значения внутри для любых частичных совпадений внутри массива.Затем переберите все классы name, чтобы добавить класс с именем display.Если не найдено ни одного совпадения, он удалит класс display

$(".task-label input").on("change keyup paste", function(){
        let handles = ['john', 'jake', 'james'];

             
        for(let elements of handles ) {

  
            if (elements.includes($('.task-label input').value())) {
                $('.name-'+ elements).addClass();
              } else {
                console.log('no match');
            }

  
          }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="task-label">
        <input id="name" type="text" name="name">
      </div>
      
      <ul class="name-list">
        <li id="john" class="name name-john">@John</li>
        <li id="jake" class="name name-jake">@Jake</li>
        <li id="alex" class="name name-alex">@Alex</li>
        <li id="allison" class="name name-allison">@Allison</li>
      </ul>

Answer 1

Имя функции jquery для получения значения ввода текста - val (), а не value ().В любом случае вам не нужно использовать jquery, чтобы получить его значение.Просто обратитесь к «this.value» внутри обработчика.Следующая реализация проверяет частичные совпадения и не учитывает регистр.

$(".task-label input").on("change keyup paste", function(){
  let handles = ['john', 'jake', 'james'];
  for(let elements of handles ) {         
     if (elements.includes(this.value.toLowerCase())) {
        console.log("matched with " + elements);
        $('.name-'+ elements).addClass();
     }else {
        console.log("no-match");
     }         
  }  
})

Answer 2

На вашем месте я бы так и сделал.

Сначала я бы изменил классы в списке на атрибуты данных.Это делает его намного чище и проще для поиска.

Примечание: это не учитывает прописные и строчные буквы.Вам нужно реализовать немного больше кода, чтобы это работало.

Код комментируется, и если у вас есть вопросы, пожалуйста, задавайте.

$(".task-label input").on("change keyup paste", function() {
  
  // check for special characters
  var letters = /^[0-9a-zA-Z]+$/;
  
  // get input and convert to array
  var searchFor = $(this).val().split(" ");
  
  // clear the display class before a new search to reset
  $(".name-list").find('li').removeClass("display");
  
  // search the list from the elements in the array
  for(var el of searchFor){
  
    var name = "[data-name*="+el+"]";
    
    // make sure not empty or special char before finding the name
    if(el.match(letters)){
      $(".name-list").find(name).addClass("display");
    }
    
  }
  
});

.display {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="name-list">
  <li id="john" class="name" data-name="john">@John</li>
  <li id="jake" class="name" data-name="jake">@Jake</li>
  <li id="alex" class="name" data-name="alex">@Alex</li>
  <li id="allison" class="name" data-name="allison">@Allison</li>
</ul>

<div class="task-label">
  <input id="name" type="text" name="name">
</div>

Answer 3

Вы почти правы в своем решении, вам просто нужно изменить эту часть elements.includes($('.task-label input').val()) на $('.task-label input').val().includes(elements), потому что, если эти предопределенные имена существуют где-либо в пользовательском вводе, вы бы добавили класс.Надеюсь, это поможет ..