Make a filter with oninput Event

Posted on May 2, 2020

Maybe the most awesome event that javascript has to offer. It looks so hard to create a filter for a list but with this event things cannot get any easier.

Lets take for example a small list fruits:

<ul id="list">
  • Orange
  • Red
  • Yellow
  • Blue
  • Black


and just before them we add a input field

<input oninput="filter('#list>li',this.value)">


and finally the script

function filter(query,value) {
 var list = document.querySelectorAll(query)