JavaScript -如何显示每次输入的界面建议

基础概念

JavaScript是一种广泛使用的脚本语言，主要用于网页和网络应用开发。它可以实现动态内容、交互性和用户界面（UI）效果。界面建议通常指的是自动完成功能，即当用户在输入框中输入内容时，系统会根据已输入的内容提供一系列可能的选项供用户选择。

类型

基于静态数据的建议：使用预定义的数据集来提供建议。
基于动态数据的建议：从服务器获取实时数据来提供建议。
基于用户输入历史的建议：根据用户的历史输入记录提供建议。

应用场景

搜索引擎
电子商务网站的搜索框
社交媒体平台的搜索功能
代码编辑器

实现方法

以下是一个简单的JavaScript示例，展示如何实现基于静态数据的自动完成功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoComplete Example</title>
    <style>
        .suggestions {
            position: absolute;
            border: 1px solid #ccc;
            background-color: white;
            max-height: 200px;
            overflow-y: auto;
        }
        .suggestions div {
            padding: 5px;
            cursor: pointer;
        }
        .suggestions div:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" id="search-box" placeholder="Search...">
    <div id="suggestions" class="suggestions"></div>

    <script>
        const searchBox = document.getElementById('search-box');
        const suggestions = document.getElementById('suggestions');
        const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];

        searchBox.addEventListener('input', function() {
            const value = this.value;
            suggestions.innerHTML = '';
            if (value.length > 0) {
                const filteredData = data.filter(item => item.toLowerCase().startsWith(value.toLowerCase()));
                filteredData.forEach(item => {
                    const div = document.createElement('div');
                    div.textContent = item;
                    div.addEventListener('click', function() {
                        searchBox.value = item;
                        suggestions.innerHTML = '';
                    });
                    suggestions.appendChild(div);
                });
            }
        });

        document.addEventListener('click', function(event) {
            if (event.target !== searchBox) {
                suggestions.innerHTML = '';
            }
        });
    </script>
</body>
</html>