ES6 Type Ahead #2

ES6 Type Ahead #2

by Ford Heacock

HTML

<input type="text">

<ul>
  <li class='child'>ford</li>
  <li class='child'>steve</li>
  <li class='child'>bob</li>
  <li class='child'>ash</li>
  <li class='child'>mel</li>
</ul>

CSS

ul {
  list-style: none;
}

JavaScript

const input = document.querySelector('input');
var list = document.querySelectorAll('.child');

input.addEventListener('keyup', function(){
	var text = this.value;
	
  for(var i = 0; i < list.length; i++){
  	if (!list[i].innerText.toUpperCase().includes(text.toUpperCase())) {
    	list[i].style.display = 'none';
    } else {
    	list[i].style.display = 'block';
    }
  }

});