Sidebar Search Filter #160
Conversation
|
|
||
| // Add listener for search filter input | ||
| const sidebarDiv = document.getElementById('sidebar'); | ||
| const searchDiv = sidebarDiv.querySelector('#search') | ||
|
|
||
| if (searchDiv) { | ||
| const searchInput = searchDiv.querySelector('input'); | ||
| const menuElements = sidebarDiv.querySelectorAll('ul.menu-root'); | ||
|
|
||
| const listener = debounce((event) => { | ||
| const searchValue = event.target.value; | ||
| applySearchFilter(searchValue, menuElements) | ||
| }, 500); | ||
|
|
||
| searchInput.addEventListener('input', listener); | ||
| } | ||
| }); | ||
|
|
||
| function debounce(func, wait) { | ||
| let timeout; | ||
|
|
||
| return function executedFunction(...args) { | ||
| const later = () => { | ||
| clearTimeout(timeout); | ||
| func(...args); | ||
| }; | ||
|
|
||
| clearTimeout(timeout); | ||
| timeout = setTimeout(later, wait); | ||
| }; | ||
| } | ||
|
|
||
| function applySearchFilter(searchValue, menuElements) { | ||
| menuElements.forEach(menuElement => { | ||
| const listElements = menuElement.getElementsByTagName('li'); | ||
| let hasVisibleElements = false; | ||
| Array.from(listElements).forEach(listElement => { | ||
| let contains = true | ||
| if (searchValue.length > 0) { | ||
| const anchorElement = listElement.querySelector('a'); | ||
| const textContent = anchorElement.innerText; | ||
| contains = textContent.toLowerCase().includes(searchValue.toLowerCase()); | ||
| } | ||
|
|
||
| // Hide the list element if its text does not contain the search value | ||
| listElement.style.display = contains ? '' : 'none'; | ||
|
|
||
| if (contains) { | ||
| hasVisibleElements = true; | ||
| } | ||
| }); | ||
|
|
||
| // Hide the entire menu if none of the list items are visible | ||
| const menuParentElement = menuElement.closest('li') | ||
| menuParentElement.style.display = hasVisibleElements ? '' : 'none'; | ||
| }); | ||
| } |
There was a problem hiding this comment.
I considered adding this Javascript in a separate file that gets added via a `<script> tag, but in the end opted to leave it here for simplicity. Please let me know if you would prefer it moved out, and if so, any thoughts you have on doing that.
| <div id="search"> | ||
| <img src="<%= base_url %>/assets/images/search.svg"> | ||
| <input autocomplete="off" placeholder="Search" /> | ||
| </div> |
There was a problem hiding this comment.
One thing to note about the search behavior - if you filter the list, and then click on something that is in the sidebar, when the page renders, the search input is empty and the full sidebar is shown again.
To fix this would require adding the current search value either to the URL or in the browser's local state.
I am ok with the current behavior, but please let me know if you think this should be fixed so that when navigating between pages with a search applied, the search value is retained.
Demo: https://app.screencast.com/6cWUizeYtvRBX