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，则 apples 和 bananas 将显示为结果。我想添加的是一个过滤器，它根据字符顺序扫描我的内容。所以输入 a 作为第一个输入应该只会得到 apples，而 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>