Unable to hide header (is it due to Confluence Macro?)

[Teleperfomance Agent]

Hello,

I've been scratching my head on this for 3 days now and I'm starting to think that this is due to the confluence HTML macro (please correct me if I'm wrong).

It could be entirely that something needs to be changed in the code for it to work. If so, I'd love to get some help on this. Thank you in advance!

------

I would like to do the following:

1/ Make a table with a header.
2/ Have a search input.
3/ Upon searching to display only a result with the header.

• Current issue: 

I can set the CSS class to hide by default, but can't get it to show when upon a return. I do have a working code (see below) to do this, only without a search input, it still shows me the header.

• Intention:

Output a table row with the header when there is a search match.

• The code I use:

In a HTML macro:
-------

<script>
document.addEventListener('DOMContentLoaded', function () {
if (document.getElementById("myInput").value.length > 1) {
document.getElementById("header").className= "hideHeader";
} else {
ContactsearchFX();
document.getElementById('myInput').addEventListener('input', ContactsearchFX);
}
});

function ContactsearchFX() {

// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

// Loop through all table rows and cells, and hide those who don't match the search query
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td"),
match = false;
for (j = 0; j < td.length; j++) {
if (filter && td[j].textContent.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
if (!match) {
tr[i].style.display = "none";
} else {
tr[i].style.display = "";
}

}
}
</script>

<br>
<img src="www.example.com/banner.png" class="centered">
<br>

<input class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">

<table id="myTable">
<tr class="header">
<th style="width:20%;">One</th>
<th style="width:20%;">Two</th>
<th style="width:20%;">Three</th>
<th style="width:60%;">Four</th>
</tr>

<tr>
<td>1111</td>
<td>2222</td>
<td>3333.</td>
<td>4444</td>
</tr>

<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc.</td>
<td>dddd</td>
</tr>

<tr>
<td>eeee</td>
<td>ffff</td>
<td>gggg.</td>
<td>hhhh</td>
</tr>

</table>

-------

In a CSS macro:

-------

.hideHeader {
position: fixed;
display: none;
}

.centered {
display: block;
margin-left: auto;
margin-right: auto;
width: 18%;
}

.form-control {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 200px;
width: 18%;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

#myInput{
width: 100%;
/* Full-width */
font-size: 14px;
/* Increase font-size */
padding: 14px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 75px;
/* Add some space below the input */
align: center;
}

#myTable{
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 14px;
margin-top: 75px;
}

#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
font-size: 12px;
}

#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
margin-top: 12px;
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
font-size: 14px;}

-------

[Jerry Lupo]

Have you used JS fiddle or another mechanism to see if your code works generally?  Knowing that will help you narrow down whether it's a confluence problem (and therefore suitable to this forum) or not.

https://jsfiddle.net/

[Jerry Lupo]

Here's one already prepared for you.  Just to start - and I could be wrong as I haven't done pure JS in a while - but it doesn't seem like you have anything listening to the text box to see if there are any changes.  You just listen to the event of the page being loaded.

https://jsfiddle.net/mudh2jx1/

In any case, you should try to get that to work first.  If you need help, a coding community like StackExchange would be the place to start for help.

[Teleperfomance Agent]

Thank you for your answer. I have been able to clear it out with assistance from someone from Stackoverflow. The issue was indeed not in the Macro and/or the limitation of it, it just needed something extra. Please do ignore this request as it's indeed not the correct place to ask.

However, it's good to know that the macro is kind of robust and flexible, so kudos!