Javascript输入框搜索按字符顺序过滤答案

【问题标题】：Javascript input box search filter by character orderJavascript输入框搜索按字符顺序过滤
【发布时间】：2017-08-05 10:14:05
【问题描述】：

我有下面的代码，在输入搜索框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。

【问题讨论】：

标签： javascript

【解决方案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>

【讨论】：

string.indexOf for IE 9+

【解决方案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";
    }

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

【讨论】：