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

Question

我试图弄清楚如何根据用户给出的输入进行部分匹配。 交叉检查array中输入inside的值是否存在任何部分匹配，然后添加 class display

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

构建 Web 应用程序 John James

它将获取数组中任何部分匹配的所有值。 然后遍历所有name类以添加一个名为display的 class 。 如果没有一个匹配项，它将删除 class 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) ，因为如果这些预定义的名称存在于用户输入中的任何位置，那么您将添加 class。 希望这可以帮助..

Answer 2

获取文本输入值的 jquery function 的名称是 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 3

如果我是你，我会这样做。

首先，我会将列表中的类更改为数据属性。 这使得搜索更加干净和容易。

注意：这不考虑大写/小写。 您需要实现更多代码才能使其正常工作。

代码已注释，如果您有任何问题，请提出。

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