js输入框点击下拉提示

基础概念

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>
        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
        }
        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }
    </style>
</head>
<body>

<h2>AutoComplete Example</h2>

<input type="text" id="myInput" onkeyup="search()" placeholder="Search..">

<div id="autocomplete-container"></div>

<script>
    const data = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];

    function search() {
        const input = document.getElementById('myInput');
        const filter = input.value.toUpperCase();
        const container = document.getElementById('autocomplete-container');
        container.innerHTML = '';

        if (filter.length > 0) {
            const a = document.createElement('div');
            a.setAttribute('id', 'autocomplete-list');
            a.setAttribute('class', 'autocomplete-items');

            data.forEach(item => {
                if (item.toUpperCase().indexOf(filter) > -1) {
                    const b = document.createElement('div');
                    b.innerHTML = `<strong>${item.substr(0, filter.length)}</strong>`;
                    b.innerHTML += item.substr(filter.length);
                    b.innerHTML += `<input type='hidden' value='${item}'>`;

                    b.addEventListener('click', function(e) {
                        input.value = this.getElementsByTagName('input')[0].value;
                        container.innerHTML = '';
                    });

                    a.appendChild(b);
                }
            });

            container.appendChild(a);
        }
    }
</script>

</body>
</html>