修改Autocomplete功能：点击输入框清空结果，仅输入时显示国家选项

针对你提出的两个需求，我们可以通过以下修改来实现：

关键修改点 #

• 移除点击输入框直接显示列表的逻辑，改为点击时清空列表并隐藏，仅在输入内容时才生成匹配选项
• 输入框内容为空时，自动清空并隐藏下拉列表
• 点击外部区域时，不仅隐藏列表，同时清空列表内容，避免旧结果残留

修改后的完整代码 #

JavaScript 代码 #

// Sample list of autocomplete options
var countries = [
  "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan",
  "The Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia",
  "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi"
];

// Get references to the input field and the dropdown list
var input = document.getElementById("country-name");
var autocompleteList = document.getElementById("suggestion-list");

// Function to display the dropdown list
function showAutocompleteList() {
  autocompleteList.style.display = 'block';
}

// Function to hide the dropdown list
function hideAutocompleteList() {
  autocompleteList.style.display = 'none';
}

// Function to clear the dropdown list content
function clearAutocompleteList() {
  autocompleteList.innerHTML = '';
}

// Event listener for input field
input.addEventListener("input", function() {
  var inputValue = input.value.trim();
  clearAutocompleteList();

  // Only process if input has content
  if (inputValue) {
    // Filter and display matching items
    countries.forEach(function(country) {
      if (country.toLowerCase().startsWith(inputValue.toLowerCase())) {
        var item = document.createElement("li");
        item.textContent = country;
        item.classList.add("autocomplete-item"); // Add the "autocomplete-item" class
        item.addEventListener("click", function() {
          input.value = country;
          clearAutocompleteList();
          hideAutocompleteList();
        });
        item.addEventListener("mouseenter", function() {
          item.classList.add("active"); // Add the "active" class on hover
        });
        item.addEventListener("mouseleave", function() {
          item.classList.remove("active"); // Remove the "active" class when not hovering
        });
        autocompleteList.appendChild(item);
      }
    });
    showAutocompleteList(); // Display the list only when there's input content
  } else {
    hideAutocompleteList(); // Hide list when input is empty
  }
});

// Event listener for "keydown" on the input field
input.addEventListener("keydown", function(e) {
  if (e.key === "Tab") {
    e.preventDefault(); // Prevent the default tab behavior

    // Handle the Tab key behavior for selecting an item
    var activeItem = autocompleteList.querySelector(".autocomplete-item.active");
    if (activeItem) {
      input.value = activeItem.textContent;
      clearAutocompleteList();
      hideAutocompleteList();

      // Redirect to the corresponding HTML page
      var countryUrl = 'Countries/' + activeItem.textContent.toLowerCase() + '.html';
      window.location.href = countryUrl;
    }
  }
});

// Event listener for clicking on the list items
autocompleteList.addEventListener("click", function(e) {
  if (e.target.classList.contains("autocomplete-item")) {
    // If the clicked element has the "autocomplete-item" class
    input.value = e.target.textContent;
    clearAutocompleteList();
    hideAutocompleteList();
    // Redirect to the corresponding HTML page
    var countryUrl = 'Countries/' + e.target.textContent.toLowerCase() + '.html';
    window.location.href = countryUrl;
    e.preventDefault(); // Prevent the default click behavior
  }
});

// Event listener to close the dropdown when clicking outside of the input field
document.addEventListener("click", function(e) {
  if (e.target !== autocompleteList && e.target !== input) {
    clearAutocompleteList();
    hideAutocompleteList();
  }
});

// Modified click event for input field: clear list and hide when clicked (empty input)
input.addEventListener("click", function() {
  if (!input.value.trim()) {
    clearAutocompleteList();
    hideAutocompleteList();
  }
});

HTML 代码（无需修改） #

<header>
  <h1>Select a country</h1>
</header>
<main>
  <div id="content-wrapper">
    <div id="get-container">
      <input type="text" id="country-name" placeholder="Enter a country" autocomplete="off">
      <div id="suggestion-list" class="autocomplete-items"></div>

      <div id="error-message"></div>
    </div>
    <div id="story-container">
      <div id="generated-text"></div>
      <button id="clear">Clear</button>
    </div>
  </div>
</main>

修改说明 #

1. 新增clearAutocompleteList函数：统一处理清空下拉列表的逻辑，避免重复代码
2. 调整input事件逻辑：
   • 先去除输入内容的首尾空格，仅当内容非空时才生成匹配选项
   • 输入为空时直接隐藏列表
3. 修改输入框点击事件：点击输入框时，若输入为空则清空并隐藏列表，符合“点击时空列表”的需求
4. 优化外部点击事件：隐藏列表的同时清空内容，彻底解决旧结果残留的问题
5. 完善选项点击逻辑：选择选项后同时清空并隐藏列表，保持界面整洁

内容的提问来源于stack exchange，提问作者Patrik Qvarnström