function parkSearch() { return { query: '', results: [], loading: false, selectedId: null, async search() { if (!this.query.trim()) { this.results = []; return; } this.loading = true; try { const response = await fetch(`/parks/suggest_parks/?search=${encodeURIComponent(this.query)}`); const data = await response.json(); this.results = data.results; } catch (error) { console.error('Search failed:', error); this.results = []; } finally { this.loading = false; } }, clear() { this.query = ''; this.results = []; this.selectedId = null; }, selectPark(park) { this.query = park.name; this.selectedId = park.id; this.results = []; // Trigger filter update document.getElementById('park-filters').dispatchEvent(new Event('change')); } }; }