That is pretty slick! I am not 100% sure what is happening and what the “reload” button is doing but it looks great. Can it be manipulated by the keyboard (arrows, enter to select, etc?)
I think you have a winner but just for kicks, I tried like you suggested to develop something that was pure JS and very lean but even my attempt at vanilla JS does not seem to work in Chrome Embedded Framework (CEF), at least on Mac. Worked find on CodePen.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var s = document.getElementById('search');
s.addEventListener('keyup', function(event){
var search_string = this.value;
var options = document.getElementsByClassName("options");
for(var i = 0; i < options.length; i++){
var this_element = options[i];
// compare strings - if no match, hide
if(this_element.id.includes(search_string)){
this_element.style.display = "block";
} else {
this_element.style.display = "none";
}
}
});
</script>
</head>
<body>
<input id="search" type="text" placeholder="Type the name of a Component"/>
<div id="1234" class="options">1234</div>
<div id="abcd" class="options">abcd</div>
<div id="xyz" class="options">xyz</div>
</body>
</html>