如何使用輸入檢查數組中的值或部分？

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>