Refactor filtering allowing to link search results via URL hash

This commit is contained in:
Andrea Cardaci 2018-05-29 11:50:36 +02:00
parent b457967d07
commit 125f410e01
2 changed files with 40 additions and 18 deletions

View File

@ -23,23 +23,20 @@
</div>
<script>
var searchBox = document.querySelector('#bin-search');
var searchMessage = document.querySelector('#search-message');
searchMessage.style.display = 'none';
function filter(query) {
// consistently update URL and search box
var searchBox = document.getElementById('bin-search');
searchBox.value = query;
location.hash = query;
// ensure height during filtering
var binTableWrapper = document.querySelector('#bin-table-wrapper');
binTableWrapper.style.height = binTableWrapper.clientHeight + 'px';
searchBox.addEventListener('input', function () {
var query = searchBox.value.toLowerCase().trim();
// determine the query type
var queryType = query[0];
var noResults = true;
if (queryType === '/') {
query = query.slice(1);
}
// filter rows
var noResults = true;
document.querySelectorAll('#bin-table tbody tr').forEach(function (row) {
var binName = row.children[0].firstElementChild.innerText.toLowerCase();
var functions = row.children[1].firstElementChild.innerText.toLowerCase();
@ -53,14 +50,38 @@
}
});
searchMessage.style.display = noResults ? '' : 'none';
});
// update the search message visibility
var searchMessage = document.getElementById('search-message');
searchMessage.style.display = noResults ? 'initial' : 'none';
}
addEventListener('keydown', function (event) {
if (event.key.toLowerCase().match(/^[\/a-z]$/) &&
!(event.ctrlKey || event.altKey || event.metaKey)) {
(function () {
var searchBox = document.getElementById('bin-search');
// ensure height during filtering
var binTableWrapper = document.getElementById('bin-table-wrapper');
binTableWrapper.style.height = binTableWrapper.clientHeight + 'px';
// handle user input
searchBox.addEventListener('input', function () {
var query = searchBox.value.toLowerCase().trim();
filter(query);
});
// focus search box on keydown
addEventListener('keydown', function (event) {
if (event.key.toLowerCase().match(/^[\/a-z]$/) &&
!(event.ctrlKey || event.altKey || event.metaKey)) {
searchBox.focus();
}
});
// filter on load according to the URL
var query = decodeURIComponent(location.hash.slice(1));
filter(query);
if (query) {
searchBox.value = query;
searchBox.focus();
}
});
})();
</script>

View File

@ -95,6 +95,7 @@ h2, h3, h4, h5, h5 {
}
#search-message {
display: none;
text-align: center;
padding: 1em;
}