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

考虑修改你的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";
    }

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

Answer 2

执行此操作的一种方法是修改正则表达式以使用^（以开头）。请注意，您需要escape your string，因此不会将其视为正则表达式字符：

＆＃13;

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

＆＃13;

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

＆＃13;

虽然更简单的方法是使用.startsWith()。请注意，您需要为IE浏览器添加pollyfill，而该浏览器尚不支持该方法：

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript输入框搜索按字符顺序筛选

2 个答案: