Фильтр поиска в поле ввода Javascript по порядку символов

1

У меня есть код ниже, где на входе поле поиска searcher, мои дивы фильтруется, чтобы соответствовать, что в моем текстовом поле.

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.

Теги:

2 ответа

1
Лучший ответ

Один из способов сделать это - изменить ваше регулярное выражение для использования ^ (начинается с). Просто отметьте, что вам нужно будет избежать строки, чтобы она не рассматривалась как символы регулярного выражения:

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(). Просто отметьте, что вам нужно включить pollyfill для браузеров, таких как IE, которые еще не поддерживают этот метод:

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>
  • 1
    string.indexOf для IE 9+
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";
    }

Таким образом, он проверяет первый символ ключевого слова поиска и результат поиска.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню