如何使用输入检查数组中的值或局部变量？

Question

我试图根据用户提供的输入来确定如何进行部分匹配。交叉检查inside中是否有部分匹配项的值array，然后添加类display

例如，如果我在输入框中输入以下内容：

构建Web应用程序John James

它将为数组内的任何部分匹配获取内部的所有值。然后遍历所有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

您的解决方案几乎是正确的，您只需要将此部分elements.includes($('.task-label input').val())更改为$('.task-label input').val().includes(elements)，因为如果这些预定义的名称存在于用户输入中的任何位置，那么您将添加该类。希望对您有所帮助。

Answer 2

如果我是你，这就是我的方式。

首先，我将列表中的类更改为数据属性。这样可以使它更干净，更容易搜索。

注意：这不考虑大写/小写。您需要实现一些代码才能使它工作。

该代码已注释，如果您有任何疑问，请询问。

$(".task-label input").on("change keyup paste", function() {
  
  // 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 before finding the name
    if(el != ""){
      $(".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

它检查部分匹配，并且也不区分大小写。

$(".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");
     }         
  }  
})