JSFiddle - React, Tailwind, and code Playground

HTML

<input id="textToFilter" type="text"/>
<ul id="listToFilter" class="children">
<li><a href="#">AB</a></li>
<li><a href="#">ABC</a></li>
<li><a href="#">ABCD</a></li>
<li><a href="#">ACD</a></li>
<li><a href="#">BC</a></li>
</ul>

JavaScript

var text, links, length;

document.addEventListener("DOMContentLoaded", function() {
	
	text = document.getElementById("textToFilter");
	text.addEventListener("keyup", filter);
	
	list = document.getElementById("listToFilter");
	links = list.getElementsByTagName('a');
	length = links.length;
	
});

function filter(e) {
	
	var search = text.value,
		regexp = new RegExp(search, "i");
	
	for(var i = 0; i < length; ++i) {
	
		inner = links[i].innerHTML;
		
		if(!regexp.test(inner))
			links[i].parentNode.style.display = "none";
		else
			links[i].parentNode.style.display = "list-item";
		
	}
	
}