Javascript input box search filter by character order

Question

I have the code below wherein, on input of the search box searcher, my divs are filtered to match what's in my text box.

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>

This code works exactly as intended. However, if I type s into the search box, then apples and bananas will show up as results. What I would like to add to this is a filter that scans through my content based on the character order. So typing a as the first input should only get me apples, and b should only get me bananas.

score 1 · Answer 1 · answered Aug 05 '17 at 02:09

Consider modifying your if statement to this to make the conditions a little bit more strict:

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

This way it checks the first character of the search keyword and the search result.

score 1 · Accepted Answer · answered Aug 05 '17 at 02:14

One way to do this is modify your regexp to use ^ (starts with). Just note you would need to escape your string so it's not treated as regexp characters:

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>

Although a simpler way is to use .startsWith(). Just note you will need to include the pollyfill for browsers like IE that don't yet have support for that method:

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>

Javascript input box search filter by character order

2 Answers2