js autocomplete

// 示例代码：简单的 JavaScript 自动补全功能

// 创建一个输入框和一个用于显示建议的 div
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('id', 'autocomplete-input');
document.body.appendChild(input);

const suggestionsDiv = document.createElement('div');
suggestionsDiv.setAttribute('id', 'suggestions');
document.body.appendChild(suggestionsDiv);

// 定义一些示例数据
const data = ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes', 'Pineapple'];

// 监听输入框的变化
input.addEventListener('input', function () {
    const value = this.value;
    const suggestions = [];

    // 如果输入框为空，清空建议列表
    if (value.length === 0) {
        suggestionsDiv.innerHTML = '';
        return;
    }

    // 根据输入值过滤数据
    data.forEach(item => {
        if (item.toLowerCase().startsWith(value.toLowerCase())) {
            suggestions.push(item);
        }
    });

    // 显示建议
    suggestionsDiv.innerHTML = '';
    suggestions.forEach(suggestion => {
        const suggestionElement = document.createElement('div');
        suggestionElement.textContent = suggestion;
        suggestionElement.classList.add('suggestion');
        suggestionsDiv.appendChild(suggestionElement);

        // 点击建议项时自动填充输入框
        suggestionElement.addEventListener('click', function () {
            input.value = suggestion;
            suggestionsDiv.innerHTML = '';
        });
    });
});

解释说明：

1. HTML 结构：

   • 创建了一个 input 元素用于用户输入。
   • 创建了一个 div 元素用于显示建议列表。

2. 数据源：

   • 使用了一个数组 data，其中包含了一些水果名称，作为自动补全的候选数据。

3. 事件监听：

   • 当用户在输入框中输入内容时，触发 input 事件。
   • 每次输入时，根据当前输入值过滤 data 数组中的匹配项，并将匹配结果展示在 suggestionsDiv 中。

4. 建议项点击：

   • 用户点击某个建议项时，自动将该建议项的文本填充到输入框中，并隐藏建议列表。

5. 样式：

   • 建议项使用了 suggestion 类名，可以根据需要添加 CSS 样式以美化界面。

这个示例展示了如何使用 JavaScript 实现一个简单的自动补全功能。