如何在JavaScript / HTML / CSS中处理跨度关键字框

<div class="container">
  <input type="text" id="inputBox" placeholder="输入关键字">
  <div id="keywordBox"></div>
</div>

.container {
  position: relative;
}

#keywordBox {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  display: none;
}

const inputBox = document.getElementById('inputBox');
const keywordBox = document.getElementById('keywordBox');

inputBox.addEventListener('input', function() {
  const keyword = inputBox.value.toLowerCase(); // 获取输入框的值并转为小写

  // 根据关键字进行匹配和过滤
  const matchedKeywords = keywords.filter(function(item) {
    return item.toLowerCase().includes(keyword);
  });

  // 清空关键字框并显示匹配的关键字
  keywordBox.innerHTML = '';
  matchedKeywords.forEach(function(item) {
    const keywordItem = document.createElement('div');
    keywordItem.textContent = item;
    keywordBox.appendChild(keywordItem);
  });

  // 显示或隐藏关键字框
  if (matchedKeywords.length > 0) {
    keywordBox.style.display = 'block';
  } else {
    keywordBox.style.display = 'none';
  }
});

// 点击关键字框中的关键字，将其填充到输入框中
keywordBox.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    inputBox.value = event.target.textContent;
    keywordBox.style.display = 'none';
  }
});