diff options
| author | Julian T <julian@jtle.dk> | 2020-09-09 20:56:19 +0200 |
|---|---|---|
| committer | Julian T <julian@jtle.dk> | 2020-09-09 20:58:43 +0200 |
| commit | c30c37090e394e387b329e488d4f95309c0ef20b (patch) | |
| tree | 67b562a4759f5fe5700b038876d06d7070e30010 | |
| parent | 32ecbd53f122b30f847b84e12ca659fb4e5158ef (diff) | |
Added search
| -rw-r--r-- | root.template | 72 |
1 files changed, 59 insertions, 13 deletions
diff --git a/root.template b/root.template index 2db38db..7178bf0 100644 --- a/root.template +++ b/root.template @@ -20,6 +20,14 @@ :checked + .help { display: block; } + + #search-box { + display: none; + } + + :checked + #search-box { + display: block; + } </style> </head> <body> @@ -83,18 +91,56 @@ <input id="location" name="location" type="text"> <input type="submit" value="go"> </form> - </div><br><br> - <table> - <tr> - <th>Ref</th> - <th>Navn</th> - </tr> - {{ range .Notes }} - <tr> - <td style="font-family: monospace;">#{{ .Hash }}/{{ .Location }}</td> - <td>{{ .Name }}</td> - </tr> - {{ end }} - </table> + </div><br> + <label for="dosearch">Vis søg</label> + <input type="checkbox" id="doseach"> + <div id="search-box"> + <label for="search">Filter: </label> + <input type="input" id="search"> + <span id="search-status"></span> + </div><br> + <div class="box"> + <table id="notetable"> + <tr> + <th>Ref</th> + <th>Navn</th> + </tr> + {{ range .Notes }} + <tr> + <td style="font-family: monospace;">#{{ .Hash }}/{{ .Location }}</td> + <td>{{ .Name }}</td> + </tr> + {{ end }} + </table> + </div> + <script> + function inputchange() { + let value = this.value; + + let table = document.getElementById("notetable"); + let rows = table.getElementsByTagName("tr"); + let status = document.getElementById("search-status"); + status.textContent = "søger"; + + // Filter table + for (var i = 1; i < rows.length; i++) { + let row = rows[i] + if (!row) { + continue; + } + + if (row.textContent.indexOf(value) > -1) { + row.style.display = ""; + } else { + row.style.display = "none"; + } + } + status.textContent = "done"; + + } + e = document.getElementById("search"); + e.addEventListener("change", inputchange); + e.addEventListener("keyup", inputchange); + </script> </body> </html> |