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;}
-------
