document.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById('searchedLocationInput'),
        suggestionsContainer = document.getElementById('searchedLocationSuggestions'),
        options = [...document.getElementById('userSearchedLocation').options];

  input.addEventListener('input', () => {
    const inputValue = input.value.toLowerCase();
    suggestionsContainer.innerHTML = '';

    if (inputValue) { options.forEach(option => {
      const optionText = option.text.toLowerCase();
      if (optionText.includes(inputValue)) {
        const suggestion = document.createElement('div');
        suggestion.classList.add('autocomplete-suggestion');
        suggestion.textContent = option.text;
        suggestion.addEventListener('click', () => {
          input.value = suggestion.textContent;
          suggestionsContainer.innerHTML = '';
        });
        suggestionsContainer.appendChild(suggestion);
      }
    });}
  });
  document.addEventListener('click', (event) => {
    if (!event.target.closest('#searchedLocationInput')) {
      suggestionsContainer.innerHTML = '';
    }
  });
});