验证自动完成同时激活两个菜单_验证四舍五入自动完成菜单宽度_在PHP中同时验证两个下拉菜单 - 腾讯云开发者社区

验证自动完成同时激活两个菜单

基础概念

验证自动完成（Autocomplete）是一种用户界面功能，它根据用户输入的内容动态显示可能的匹配项，从而帮助用户快速选择或输入所需的信息。当用户在一个输入框中输入文本时，系统会根据已有的数据源或算法生成一个下拉菜单，显示与输入文本匹配的建议项。

类型

基于静态数据的自动完成：数据预先定义好，不随用户输入变化。
基于动态数据的自动完成：数据根据用户的输入实时生成，如搜索建议。
模糊匹配自动完成：允许部分匹配，不仅限于完全匹配。

应用场景

搜索引擎：输入关键词时显示相关网页或产品。
表单填写：如地址、电话号码等信息的自动填充。
代码编辑器：输入代码时显示可能的函数或变量名。

问题及解决方案

问题：同时激活两个菜单

当尝试实现自动完成功能时，可能会遇到同时激活两个菜单的问题。这通常是由于事件处理不当或状态管理混乱导致的。

原因

事件冒泡：点击一个菜单项时，事件可能会冒泡到父元素或其他菜单，导致多个菜单被激活。
状态管理不当：多个菜单的状态没有正确同步，导致同时显示。

解决方案

以下是一个简单的示例代码，展示如何使用JavaScript和CSS实现自动完成功能，并避免同时激活两个菜单的问题。

<!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>
    <input type="text" id="autocompleteInput">
    <div id="autocomplete-list" class="autocomplete-items"></div>

    <script>
        const input = document.getElementById('autocompleteInput');
        const list = document.getElementById('autocomplete-list');
        let currentFocus = -1;

        input.addEventListener('input', function(e) {
            const value = this.value;
            if (!value) {
                list.innerHTML = '';
                return;
            }

            // Simulate fetching data from a server
            const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'].filter(item => item.toLowerCase().startsWith(value.toLowerCase()));

            list.innerHTML = '';
            data.forEach(item => {
                const div = document.createElement('div');
                div.innerHTML = `<strong>${item.substr(0, value.length)}</strong>${item.substr(value.length)}`;
                div.addEventListener('click', function(e) {
                    input.value = item;
                    list.innerHTML = '';
                    currentFocus = -1;
                });
                list.appendChild(div);
            });

            currentFocus = -1;
        });

        input.addEventListener('keydown', function(e) {
            const items = list.getElementsByTagName('div');
            if (e.keyCode === 40) { // Down arrow
                currentFocus++;
                setActive(items);
            } else if (e.keyCode === 38) { // Up arrow
                currentFocus--;
                setActive(items);
            } else if (e.keyCode === 13) { // Enter
                e.preventDefault();
                if (currentFocus > -1) {
                    items[currentFocus].click();
                }
            }
        });

        function setActive(items) {
            removeActive(items);
            if (currentFocus >= items.length) {
                currentFocus = 0;
            }
            if (currentFocus < 0) {
                currentFocus = items.length - 1;
            }
            items[currentFocus].classList.add('autocomplete-active');
        }

        function removeActive(items) {
            for (let i = 0; i < items.length; i++) {
                items[i].classList.remove('autocomplete-active');
            }
        }
    </script>
</body>
</html>