button to clear filter

This commit is contained in:
Michael Roitzsch
2020-10-18 23:17:09 +02:00
parent 1241dfc400
commit c4904eea37

View File

@@ -73,9 +73,14 @@ document.addEventListener("DOMContentLoaded", event => {
document.getElementById("filter").addEventListener("change", event => {
event.target.select();
});
// place cursor in filter control
document.getElementById("filter").focus();
update("");
// clear filter button
document.getElementById("clear").addEventListener("click", event => {
document.getElementById("filter").value = "";
document.getElementById("filter").focus();
update("");
});
// initialize filter control
document.getElementById("clear").click();
});
});
</script>
@@ -96,6 +101,13 @@ document.addEventListener("DOMContentLoaded", event => {
<p class="my-0">Collected knowledge about the internals of Apples platforms.</p>
<p class="my-0">Sorted by keyword, abbreviation, or codename.</p>
<p>Feel free to contribute on <a href="https://github.com/mroi/apple-internals">GitHub</a>.</p>
<input id="filter" type="text" class="form-control" placeholder="Filter" style="max-width:30em">
<div class="input-group" style="max-width:30em">
<input id="filter" type="text" class="form-control" placeholder="Filter">
<div id="clear" class="input-group-text">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
<div id="content" class="mt-3">
</body>