function locationAutocomplete(field, filterParks = false) {
    return {
        query: '',
        suggestions: [],
        fetchSuggestions() {
            let url;
            const params = new URLSearchParams({
                q: this.query,
                filter_parks: filterParks
            });

            switch (field) {
                case 'country':
                    url = '/parks/ajax/countries/';
                    break;
                case 'region':
                    url = '/parks/ajax/regions/';
                    // Add country parameter if we're fetching regions
                    const countryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
                    if (countryInput && countryInput.value) {
                        params.append('country', countryInput.value);
                    }
                    break;
                case 'city':
                    url = '/parks/ajax/cities/';
                    // Add country and region parameters if we're fetching cities
                    const regionInput = document.getElementById(filterParks ? 'region' : 'id_region_name');
                    const cityCountryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
                    if (regionInput && regionInput.value && cityCountryInput && cityCountryInput.value) {
                        params.append('country', cityCountryInput.value);
                        params.append('region', regionInput.value);
                    }
                    break;
            }

            if (url) {
                fetch(`${url}?${params}`)
                    .then(response => response.json())
                    .then(data => {
                        this.suggestions = data;
                    });
            }
        },
        selectSuggestion(suggestion) {
            this.query = suggestion.name;
            this.suggestions = [];

            // If this is a form field (not filter), update hidden fields
            if (!filterParks) {
                const hiddenField = document.getElementById(`id_${field}`);
                if (hiddenField) {
                    hiddenField.value = suggestion.id;
                }

                // Clear dependent fields when parent field changes
                if (field === 'country') {
                    const regionInput = document.getElementById('id_region_name');
                    const cityInput = document.getElementById('id_city_name');
                    const regionHidden = document.getElementById('id_region');
                    const cityHidden = document.getElementById('id_city');
                    
                    if (regionInput) regionInput.value = '';
                    if (cityInput) cityInput.value = '';
                    if (regionHidden) regionHidden.value = '';
                    if (cityHidden) cityHidden.value = '';
                } else if (field === 'region') {
                    const cityInput = document.getElementById('id_city_name');
                    const cityHidden = document.getElementById('id_city');
                    
                    if (cityInput) cityInput.value = '';
                    if (cityHidden) cityHidden.value = '';
                }
            }

            // Trigger form submission for filters
            if (filterParks) {
                htmx.trigger('#park-filters', 'change');
            }
        }
    };
}