使用CSS实现文本输入框的自动填充效果
要实现文本输入框的自动填充效果，可以使用CSS中的`:hover`和`:focus`选择器以及JavaScript来实现。以下是一种可能的方法：HTML部分：
<input type="text" id="input-box" />
<ul id="autocomplete-list"></ul>
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部分：
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`事件，在用户输入时根据输入值生成相应的自动完成选项，并显示在下拉列表中。当用户点击某个选项时，将该选项的文本内容填充到输入框中。
请注意：这只是一个简单的示例，实际情况中你可能需要根据需求进行适当的修改和扩展。
页:
[1]