129 lines
4.6 KiB
Plaintext
129 lines
4.6 KiB
Plaintext
---
|
|
// Import necessary utilities
|
|
import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";
|
|
|
|
// Define the props interface
|
|
export interface Props {
|
|
placeholder?: string;
|
|
onSearch?: (query: string) => void;
|
|
}
|
|
|
|
// Destructure props
|
|
const { placeholder, onSearch } = Astro.props;
|
|
|
|
// Get current language
|
|
const currentLang = getLanguageFromPath(Astro.url.pathname);
|
|
const defaultPlaceholder = t('elements.searchPlaceholder', currentLang);
|
|
|
|
// Get current search query from URL
|
|
const currentSearchQuery = Astro.url.searchParams.get('search') || '';
|
|
---
|
|
|
|
<div class="mb-6">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
placeholder={placeholder || defaultPlaceholder}
|
|
value={currentSearchQuery}
|
|
class="w-full px-4 py-3 pl-12 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
|
/>
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<button
|
|
id="clear-search"
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center opacity-0 pointer-events-none transition-opacity duration-200 hover:text-gray-600"
|
|
aria-label="Clear search"
|
|
>
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Client-side search functionality with API calls
|
|
const searchInput = document.getElementById('search-input') as HTMLInputElement;
|
|
const clearButton = document.getElementById('clear-search') as HTMLButtonElement;
|
|
const elementsContainer = document.querySelector('[data-elements-container]');
|
|
|
|
if (searchInput && elementsContainer) {
|
|
let searchTimeout: NodeJS.Timeout;
|
|
|
|
// Function to update clear button visibility
|
|
const updateClearButton = () => {
|
|
const hasValue = searchInput.value.length > 0;
|
|
clearButton.style.opacity = hasValue ? '1' : '0';
|
|
clearButton.style.pointerEvents = hasValue ? 'auto' : 'none';
|
|
};
|
|
|
|
// Function to fetch filtered data from API
|
|
const fetchFilteredElements = async (query: string) => {
|
|
try {
|
|
// Show loading state
|
|
if (elementsContainer) {
|
|
elementsContainer.innerHTML = '<div class="text-center py-8"><p class="text-gray-500 text-lg">Searching...</p></div>';
|
|
}
|
|
|
|
// Build the API URL with search parameters
|
|
const currentUrl = new URL(window.location.href);
|
|
if (query.trim()) {
|
|
currentUrl.searchParams.set('search', query.trim());
|
|
} else {
|
|
currentUrl.searchParams.delete('search');
|
|
}
|
|
|
|
// Fetch the new page content
|
|
const response = await fetch(currentUrl.toString());
|
|
const html = await response.text();
|
|
|
|
// Parse the HTML and extract the elements container
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
const newElementsContainer = doc.querySelector('[data-elements-container]');
|
|
|
|
if (newElementsContainer && elementsContainer) {
|
|
elementsContainer.innerHTML = newElementsContainer.innerHTML;
|
|
}
|
|
|
|
// Update URL without page reload
|
|
window.history.pushState({}, '', currentUrl.toString());
|
|
|
|
} catch (error) {
|
|
console.error('Error fetching filtered elements:', error);
|
|
if (elementsContainer) {
|
|
elementsContainer.innerHTML = '<div class="text-center py-8"><p class="text-red-500 text-lg">Error loading results</p></div>';
|
|
}
|
|
}
|
|
};
|
|
|
|
// Search input event listener with debouncing
|
|
searchInput.addEventListener('input', (e) => {
|
|
const query = (e.target as HTMLInputElement).value;
|
|
updateClearButton();
|
|
|
|
// Clear previous timeout
|
|
clearTimeout(searchTimeout);
|
|
|
|
// Set new timeout for debounced search
|
|
searchTimeout = setTimeout(() => {
|
|
fetchFilteredElements(query);
|
|
}, 300); // 300ms delay
|
|
});
|
|
|
|
// Clear button event listener
|
|
clearButton.addEventListener('click', () => {
|
|
searchInput.value = '';
|
|
updateClearButton();
|
|
fetchFilteredElements('');
|
|
searchInput.focus();
|
|
});
|
|
|
|
// Initialize clear button state
|
|
updateClearButton();
|
|
}
|
|
</script> |