HTML 自动补全文本框

在本文中，我们将介绍如何使用 HTML 和 JavaScript 实现自动补全文本框的功能。自动补全文本框是一种可以根据用户输入的内容提供相关选项的输入框，可以大大简化用户的操作，提升用户体验。

阅读更多：HTML 教程

基本原理

自动补全文本框的基本原理是通过监听用户在输入框中的输入，并根据输入的内容动态地从一个数据源中获取并显示相关的选项列表。用户可以通过键盘或鼠标选择其中一个选项，然后将其作为输入框的值。

实现步骤

步骤一：创建文本框和选项列表

首先，我们需要在 HTML 中创建一个文本框和一个用于显示选项的列表。文本框用于接收用户的输入，而选项列表则用于显示匹配用户输入的选项。

<input type="text" id="myInput" autocomplete="off">
<ul id="myList"></ul>

步骤二：获取用户输入并更新选项列表

接下来，我们需要通过 JavaScript 监听用户在文本框中的输入，并根据输入的内容更新选项列表。在输入框的输入事件中，我们可以通过获取输入框的值，并对其进行处理和过滤，然后将过滤后的结果显示在选项列表中。

var input = document.getElementById("myInput");
var list = document.getElementById("myList");

input.addEventListener("input", function() {
    var inputValue = input.value.toLowerCase(); // 将输入的内容转换为小写，便于匹配
    var options = ["Apple", "Banana", "Cherry", "Date", "Grape"]; // 数据源

    // 清空选项列表
    list.innerHTML = "";

    // 循环遍历数据源，找出匹配的选项并添加到选项列表中
    for (var i = 0; i < options.length; i++) {
        if (options[i].toLowerCase().indexOf(inputValue) > -1) {
            var option = document.createElement("li");
            option.textContent = options[i];
            list.appendChild(option);
        }
    }
});

步骤三：处理选项选择事件

最后，我们需要处理选项选择事件，即当用户选择一个选项时，将选中的选项作为文本框的值。

list.addEventListener("click", function(e) {
    if (e.target && e.target.nodeName === "LI") {
        input.value = e.target.textContent;
    }
});

示例

为了更好地理解和演示自动补全文本框的功能，我们来看一个完整的示例。假设我们有一个包含水果名称的数据源，并且我们希望根据用户输入的内容来提供匹配的水果选项。

<!DOCTYPE html>
<html>
<head>
<style>
    ul { 
        list-style-type: none; 
        padding: 0; 
        margin: 0; 
        border: 1px solid #ccc; 
    }
    li { 
        padding: 5px; 
        cursor: pointer; 
    }
    li:hover { 
        background-color: #f2f2f2; 
    }
</style>
</head>
<body>

<h1>自动补全文本框示例</h1>

<input type="text" id="myInput" autocomplete="off">
<ul id="myList"></ul>

<script>
var input = document.getElementById("myInput");
var list = document.getElementById("myList");
var options = ["Apple", "Banana", "Cherry", "Date", "Grape"];

input.addEventListener("input", function() {
    var inputValue = input.value.toLowerCase();
    list.innerHTML = "";

    for (var i = 0; i < options.length; i++) {
        if (options[i].toLowerCase().indexOf(inputValue) > -1) {
            var option = document.createElement("li");
            option.textContent = options[i];
            list.appendChild(option);
        }
    }
});

list.addEventListener("click", function(e) {
    if (e.target && e.target.nodeName === "LI") {
        input.value = e.target.textContent;
    }
});
</script>

</body>
</html>

在上面的示例中，用户在文本框中输入的内容会被与数据源进行匹配，并显示匹配的选项。用户可以通过鼠标点击其中一个选项，然后该选项的值会出现在文本框中。