У меня есть код ниже, где на входе поле поиска 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
.
Один из способов сделать это - изменить ваше регулярное выражение для использования ^
(начинается с). Просто отметьте, что вам нужно будет избежать строки, чтобы она не рассматривалась как символы регулярного выражения:
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>
Подумайте об изменении своего оператора 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";
}
Таким образом, он проверяет первый символ ключевого слова поиска и результат поиска.