Javascript輸入框按字符順序搜索過濾

Question

我有下面的代碼，其中，在搜索框searcher的輸入上，我的div將被過濾以匹配我的文本框中的內容。

var searcher = document.getElementById("searcher"); 
 
var fruits = document.getElementsByClassName("fruits"); 
 
searcher.oninput = function() { 
 
    var matcher = new RegExp(searcher.value, "gi"); 
 
    for (i = 0; i < fruits.length; i++) { 
 
    if (matcher.test(fruits[i].innerHTML)) { 
 
     fruits[i].style.display = "inline-block"; 
 
    } else { 
 
     fruits[i].style.display = "none"; 
 
    } 
 
    } 
 
}

<input type="text" id="searcher" /> 
 
<p class="fruits">apples</p> 
 
<p class="fruits">bananas</p> 
 
<p class="fruits">cantaloupe</p>

此代碼的工作完全按照預期。但是，如果我在搜索框中輸入s，則​​和bananas將顯示爲結果。我想添加到這是一個過濾器，根據字符順序掃描我的內容。所以打字a作爲第一個輸入只應該讓我​​，和b只應該讓我bananas。

Answer 1

一種方法是修改您的正則表達式使用^（開頭）。只要注意你需要escape your string所以它不被視爲正則表達式的字符：

var searcher = document.getElementById("searcher"); 
 
var fruits = document.getElementsByClassName("fruits"); 
 
searcher.oninput = function(){ 
 
    var matcher = new RegExp("^"+(searcher.value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')), "gi"); 
 
    for (i = 0; i < fruits.length; i++){ 
 
     if (matcher.test(fruits[i].innerHTML)){ 
 
      fruits[i].style.display="inline-block"; 
 
     } 
 
     else { 
 
      fruits[i].style.display = "none"; 
 
     } 
 
    } 
 
}

<input type="text" id="searcher" /> 
 
     <p class="fruits">apples</p> 
 
     <p class="fruits">bananas</p> 
 
     <p class="fruits">cantaloupe</p>

雖然簡單的方法是使用.startsWith()。只要注意你將需要包括像IE瀏覽器的pollyfill是還沒有對這種方法的支持：

var searcher = document.getElementById("searcher"); 
 
var fruits = document.getElementsByClassName("fruits"); 
 
searcher.oninput = function(){ 
 
    for (i = 0; i < fruits.length; i++){ 
 
     if (fruits[i].innerHTML.startsWith(searcher.value)){ 
 
      fruits[i].style.display="inline-block"; 
 
     } 
 
     else { 
 
      fruits[i].style.display = "none"; 
 
     } 
 
    } 
 
}

<input type="text" id="searcher" /> 
 
     <p class="fruits">apples</p> 
 
     <p class="fruits">bananas</p> 
 
     <p class="fruits">cantaloupe</p>

Answer 2

考慮修改if語句來本作的條件有點更加嚴格：

if (matcher.test(fruits[i].innerHTML) && searcher.value.charAt(0) == fruits[i].innerHTML.charAt(0)){ 
     fruits[i].style.display="inline-block"; 
    } 
    else { 
     fruits[i].style.display = "none"; 
    } 

這樣，它檢查搜索關鍵字和搜索結果的第一個字符。