JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="edit_search" onkeyup="find_my_div();">
<input type="button" onClick="find_my_div();" value="Find">
<div id="user_0" class="name" style="display:none">Andy Daulton
<br/>Owner Nissan
<br/>
<br/>
</div>
<div id="user_1" class="name" style="display:none">Doug Guy
<br/>Bug Collector
<br/>
<br/>
</div>
<div id="user_2" class="name" style="display:none">Sam Hilton
<br/>Famous Celebrity in Hollywood
<br/>
<br/>
</div>
<div id="user_3" class="name" style="display:none">Don Grey
<br/>Old man
<br/>
<br/>
</div>
<div id="user_4" class="name" style="display:none">Amy Hinterly
<br/>Cook
<br/>
<br/>
</div>
<div id="user_5" class="name" style="display:none">Gary Doll
<br/>Racecar Driver
<br/>
<br/>
</div>
<div id="user_6" class="name" style="display:none">Tod Akers
<br/>Football Player
<br/>
<br/>
</div>
<div id="user_7" class="name" style="display:none">Greg Barkley
<br/>Interior designer
<br/>
<br/>
</div>
<div id="user_8" class="name" style="display:none">Alen Simmons
<br/>8th place winner
<br/>
<br/>
</div>
JavaScript
function gid(a_id) {
return document.getElementById(a_id);
}
function close_all() {
for (i = 0; i < 999; i++) {
var o = gid("user_" + i);
if (o) {
o.style.display = "none";
}
}
}
function find_my_div() {
close_all();
var o_edit = gid("edit_search");
var str_needle = edit_search.value;
str_needle = str_needle.toUpperCase();
var searchStrings = str_needle.split(/\W/);
for (var i = 0, len = searchStrings.length; i < len; i++) {
var currentSearch = searchStrings[i].toUpperCase();
if (currentSearch !== "") {
nameDivs = document.getElementsByClassName("name");
for (var j = 0, divsLen = nameDivs.length; j < divsLen; j++) {
if (nameDivs[j].textContent.toUpperCase().indexOf(currentSearch) !== -1) {
nameDivs[j].style.display = "block";
}
}
}
}
}