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"; 
    } 

这样，它检查搜索关键字和搜索结果的第一个字符。