rita,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 1920px;
height: 1024px;
background-color: #fffdfe;
font-family: Brandon Grotesque;
letter-spacing: .3px;
}
#search_bar {
height: 40px;
width: 652px;
width: 652px;
border: 1px solid #d6d6d6;
position: absolute;
top: 48px;
bottom: 0;
margin-left: 349px;
margin-right: 349px;
cursor: pointer;
font-size: 13px;
padding-left: 9px;
}
#row2 {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
width: 652px;
}
#row2 li a {
border: 1px solid #ddd;
background-color: #f6f6f6;
text-decoration: none;
font-size: 18px;
color: blue;
display: inline-block;
border-right: none;
border-left: none;
padding-top: 25px;
padding-bottom: 25px;
}
#row2 li a:hover {
background-color: #eee;
color: red;
}
#icon1::after {
content: '\2B07';
float: right;
font-size: 23px;
background-color: aqua;
display: inline-block;
}
#icon1:hover::after {
content: '\2B06';
}
#top2, #top {
margin-left: 349px;
margin-right: 349px;
background: aliceblue;
width: 652px;
margin-top: 155px;
}
#top2 {
margin-top: 55px;
}
.top3 {
align-items: center;
width: 637px;
display: inline-block;
background: #406e97;;
display: inline-block;
}
.column {
color: background: #323232;
cursor: pointer;
display: inline-block;
padding-right: 12px;
}
.column:hover {
color: #ef5e3a;
}
a {
text-decoration: none;
}
a:hover {
color: red;
}
.color {
color: aqua;
}
li.red .top3{
color: red;
}
</style>
</head>
<body>
<input type="text" name="example" id="search_bar" oninput="myFunction()" value="🔍 Search FAQ" onfocus="value=''">
<div id="all_top">
<div id="top"></div>
<div id="top2"></div>
</div>
<script>
let arr2 = [{
name: 'HELLO'
},
{
name: 'GOOD DAY'
},
{
name: 'MORNING'
},
]
let text = '<ul id="row2">';
for (let { name } of arr2) {
text += `<li><a href='#'><div class='top3'>${name}`;
}
document.getElementById('top2').innerHTML = text;
let input = document.getElementById("search_bar"),
lis = document.querySelectorAll('#row2 > li');
function myFunction() {
let txtValue = input.value.trim().toUpperCase();
lis.forEach(function(li) {
let textContent = li.textContent;
let toggle = txtValue && textContent.toUpperCase().indexOf(txtValue) > -1;
li.classList.toggle('red', toggle)
})
}
</script>
</body>
</html>