tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-07 05:05:20 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Fix debouncing in searchbox

Browse Source
This commit is contained in:
Ole Eskild Steensen 2022-12-15 14:47:22 +01:00
parent 4b49875dfa
commit 3851026939
2 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/site/_includes/components/searchScript.njk
View File

@ -111,10 +111,11 @@
} }
}); });
const debouncedSearch = debounce(search, 250, false);
field = document.querySelector('#term'); field = document.querySelector('#term');
field.addEventListener('keydown', (e) => { field.addEventListener('keydown', (e) => {
if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') { if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
debounce(search, 500, false)(); debouncedSearch();
} }
}); });
resultsDiv = document.querySelector('#search-results'); resultsDiv = document.querySelector('#search-results');
@ -144,12 +145,12 @@
resultsDiv.innerHTML = resultsHTML; resultsDiv.innerHTML = resultsHTML;
return; return;
} }
resultsHTML += '<ul>'; resultsHTML += '<div>';
// we need to add title, url from ref // we need to add title, url from ref
results.forEach(r => { results.forEach(r => {
resultsHTML += `<li class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></li>`; resultsHTML += `<div class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></div>`;
}); });
resultsHTML += '</ul>'; resultsHTML += '</div>';
resultsDiv.innerHTML = resultsHTML; resultsDiv.innerHTML = resultsHTML;
} }
</script> </script>

11
src/site/styles/digital-garden-base.scss
View File

@ -292,11 +292,6 @@ ul.task-list {
max-height: 50vh; max-height: 50vh;
} }
#search-results ul {
padding-inline-start: 0;
width: 100%;
}
#search-results .searchresult { #search-results .searchresult {
margin-bottom: 15px; margin-bottom: 15px;
list-style: none; list-style: none;
@ -306,10 +301,6 @@ ul.task-list {
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
&:hover {
border: 2px solid var(--text-accent);
}
&.active{ &.active{
border: 2px solid var(--text-accent); border: 2px solid var(--text-accent);
} }
@ -329,7 +320,7 @@ ul.task-list {
.search-link { .search-link {
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1.2rem; font-size: 1.4rem;
} }
.search-button { .search-button {