基于HTML/CSS/JS的Autocomplete组件hover高亮功能修复求助

问题根源 #

1. 列表项未绑定对应CSS类：JS生成的<li>元素缺少autocomplete-item类，导致CSS中定义的悬停和激活样式无法生效。
2. 下拉列表定位错误：.autocomplete-items使用position: relative会占用页面空间，无法实现悬浮在输入框下方的预期效果。
3. 冗余JS事件监听：CSS的:hover伪类已能实现基础悬停高亮，无需额外通过mouseover/mouseout事件控制样式（若需支持键盘导航的激活状态可保留事件）。

修复步骤 #

1. 给列表项添加CSS类

在JS创建<li>元素时，添加autocomplete-item类：

var item = document.createElement("li");
item.classList.add("autocomplete-item"); // 新增此行
item.textContent = country;

2. 修正下拉列表定位样式

修改.autocomplete-items的CSS属性，同时给输入框添加容器确保定位正确：

.autocomplete-items {
  position: absolute; /* 改为绝对定位 */
  max-height: 150px;
  overflow-y: auto;
  list-style-type: none;
  width: 200px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

在HTML中给输入框包裹.autocomplete容器：

<div id="get-container">
  <div class="autocomplete">
    <input type="text" id="country-name" placeholder="Enter a country" autocomplete="off">
    <div id="suggestion-list" class="autocomplete-items"></div>
  </div>
  <!-- 其他元素保留不变 -->
</div>

3. 可选：移除冗余JS事件

若仅需CSS悬停效果，可删除以下代码：

item.addEventListener("mouseover", function() {
  item.classList.add("active");
});
item.addEventListener("mouseout", function() {
  item.classList.remove("active");
});

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Story Fetcher</title>
  <link rel="stylesheet" href="CSS/index.css">
  <link rel="stylesheet" href="CSS/autocomplete.css">
  <script type="module" src="autocomplete.js"></script>
  <script src="country.js"></script>
</head>

<body>
  <header>
    <h1>Select a country</h1>
  </header>
  <main>
    <div id="content-wrapper">
      <div id="get-container">
        <div class="autocomplete">
          <input type="text" id="country-name" placeholder="Enter a country" autocomplete="off">
          <div id="suggestion-list" class="autocomplete-items"></div>
        </div>
        <button id="get" type="button">Get Country</button>
        <div id="error-message"></div>
      </div>
      <div id="story-container">
        <div id="generated-text"></div>
        <button id="clear">Clear</button>
      </div>
    </div>
  </main>
</body>

</html>

CSS

/* Styles for the autocomplete container */
.autocomplete {
  position: relative;
  display: inline-block;
}

/* Styles for the input field */
input[type="text"] {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  transition: border 0.3s;
}

/* Styles for the autocomplete dropdown */
.autocomplete-items {
  position: absolute;
  max-height: 150px;
  overflow-y: auto;
  list-style-type: none;
  width: 200px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* Styles for each autocomplete item */
.autocomplete-item {
  padding: 5px;
  cursor: pointer;
}

/* Highlight the selected item on hover */
.autocomplete-item:hover {
  background-color: #f2f2f2;
}

/* Highlight the active item (for keyboard navigation) */
.autocomplete-item.active {
  background-color: #ccc;
}

JavaScript

// Sample list of autocomplete options
var countries = [
  "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia"
];

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

// Event listener for input field
input.addEventListener("input", function() {
  var inputValue = input.value;
  autocompleteList.innerHTML = '';

  // Filter and display matching items
  countries.forEach(function(country) {
    if (country.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1) {
      var item = document.createElement("li");
      item.classList.add("autocomplete-item");
      item.textContent = country;
      item.addEventListener("click", function() {
        input.value = country;
        autocompleteList.innerHTML = '';
      });
      // 保留激活类监听（用于键盘导航场景）
      item.addEventListener("mouseover", function() {
        item.classList.add("active");
      });
      item.addEventListener("mouseout", function() {
        item.classList.remove("active");
      });
      autocompleteList.appendChild(item);
    }
  });
});

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