使用CSS实现文本输入框的自动填充效果

能者

要实现文本输入框的自动填充效果，可以使用CSS中的`:hover`和`:focus`选择器以及JavaScript来实现。以下是一种可能的方法：

HTML部分：

[HTML] 纯文本查看 复制代码

<input type="text" id="input-box" />
<ul id="autocomplete-list"></ul>

CSS部分：

[CSS] 纯文本查看 复制代码

#autocomplete-list {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#autocomplete-list li {
  padding: 5px;
  cursor: pointer;
}

#autocomplete-list li:hover {
  background-color: #f1f1f1;
}

JavaScript部分：

[JavaScript] 纯文本查看 复制代码

var inputBox = document.getElementById('input-box');
var autocompleteList = document.getElementById('autocomplete-list');

inputBox.addEventListener('input', function() {
  var inputValue = inputBox.value.toLowerCase();

  // 清空自动完成列表
  autocompleteList.innerHTML = '';

  // 如果输入框不为空，则显示自动完成列表
  if (inputValue !== '') {
    autocompleteList.style.display = 'block';

    // 在此处根据需求从服务器或其他数据源获取自动完成的选项
    // 然后将选项添加到自动完成列表中
    // 这里只是假设有一个固定的选项列表
    var options = ['apple', 'banana', 'cherry', 'date', 'grape'];

    options.forEach(function(option) {
      if (option.startsWith(inputValue)) {
        var li = document.createElement('li');
        li.textContent = option;
        autocompleteList.appendChild(li);
      }
    });
  } else {
    // 输入框为空时隐藏自动完成列表
    autocompleteList.style.display = 'none';
  }
});

autocompleteList.addEventListener('click', function(event) {
  // 将所选的自动完成选项填充到输入框中
  inputBox.value = event.target.textContent;
  autocompleteList.style.display = 'none';
});

这段代码的作用是：监听输入框的`input`事件，在用户输入时根据输入值生成相应的自动完成选项，并显示在下拉列表中。当用户点击某个选项时，将该选项的文本内容填充到输入框中。

请注意：这只是一个简单的示例，实际情况中你可能需要根据需求进行适当的修改和扩展。