Add search clear button

This commit is contained in:
Will Miao
2025-02-16 08:03:24 +08:00
parent 1d91251e24
commit 071b979c24
3 changed files with 64 additions and 3 deletions

View File

@@ -13,11 +13,18 @@ export class SearchManager {
this.isSearching = false;
this.isRecursiveSearch = false;
// Add clear button
this.createClearButton();
// Add this instance to state
state.searchManager = this;
if (this.searchInput) {
this.searchInput.addEventListener('input', this.handleSearch.bind(this));
// Update clear button visibility on input
this.searchInput.addEventListener('input', () => {
this.updateClearButtonVisibility();
});
}
if (this.searchModeToggle) {
@@ -38,6 +45,35 @@ export class SearchManager {
}
}
createClearButton() {
// Create clear button
const clearButton = document.createElement('button');
clearButton.className = 'search-clear';
clearButton.innerHTML = '<i class="fas fa-times"></i>';
clearButton.title = 'Clear search';
// Add click handler
clearButton.addEventListener('click', () => {
this.searchInput.value = '';
this.currentSearchTerm = '';
this.updateClearButtonVisibility();
resetAndReload();
});
// Insert after search input
this.searchInput.parentNode.appendChild(clearButton);
this.clearButton = clearButton;
// Set initial visibility
this.updateClearButtonVisibility();
}
updateClearButtonVisibility() {
if (this.clearButton) {
this.clearButton.classList.toggle('visible', this.searchInput.value.length > 0);
}
}
updateToggleUI() {
if (this.searchModeToggle) {
this.searchModeToggle.classList.toggle('active', this.isRecursiveSearch);