📅 最后修改于: 2023-12-03 14:56:02.916000 🧑 作者: Mango
在HTML中，没有预设的自动完成输入功能。但是，可以使用JavaScript等其他技术来实现这个功能。在这篇文章中，我们将讨论如何使用JavaScript来实现自动完成输入功能。
实现自动完成输入的方法是在输入框中添加一个事件监听器，监听输入框里的输入内容，然后根据输入内容来显示建议词或下拉框里可能的选项。
以下是一个使用JavaScript和HTML代码的例子，用于实现输入框的自动完成功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动完成输入 - Demo</title>
</head>
<body>
<input id="input" type="text">
<ul id="suggestions"></ul>
<script>
// 用于检索和过滤建议词的数组
const suggestionsList = [
"apple",
"banana",
"cherry",
"date",
"elderberry",
"fig",
"grape",
"kiwi",
"lemon",
];
const input = document.getElementById("input");
const suggestions = document.getElementById("suggestions");
// 添加事件监听器，监听文本框的输入
input.addEventListener("input", function() {
// 清空建议列表
suggestions.innerHTML = "";
// 如果查询文本框为空，不显示建议
if (input.value.length === 0) {
return;
}
// 获取用户查询的文本（不区分大小写）
const query = input.value.toLowerCase();
// 筛选词以在建议中显示
const filteredSuggestions = suggestionsList.filter(function(suggestion) {
return suggestion.toLowerCase().startsWith(query);
});
// 在建议框中增加筛选过的建议词
filteredSuggestions.forEach(function(suggestion) {
const li = document.createElement("li");
li.textContent = suggestion;
suggestions.appendChild(li);
});
});
</script>
</body>
</html>
代码中的核心逻辑是添加了一个input事件监听器，用于响应输入框的文本输入。在监听器内部，先清空建议列表的内容，然后获取输入框里的输入内容。
接下来通过使用JavaScript的filter()方法来从建议列表中过滤符合用户输入的列表项，并将它们添加到建议框中。
最后，通过使用document.createElement()方法创建一个li元素，将过滤过后的建议词添加到建议列表中。
使用JavaScript和HTML，可以轻松地实现自动完成输入的功能，以减少用户在输入时不必要的时间和工作。此方法也可适用于其他Web技术。