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

基础概念

验证自动完成（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>

参考链接

通过上述代码和解释，你应该能够理解自动完成功能的基础概念、优势、类型、应用场景，并解决同时激活两个菜单的问题。

页面内容是否对你有帮助？

有帮助

没帮助

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

、、

有没有办法让两个v-autocomplete菜单同时显示？如果用户单击任何一个v-autocomplete，该v-autocomplete和其他v-autocomplete下拉菜单都会同时显示相应的选项。

浏览 72提问于2021-02-10得票数 0

2回答

在行中使用分隔符的自动完成文本框

、

如何使用行中具有不同字符的文本框，并自动完成并激活下拉菜单？在文本框中，我输入第一个不同的字符，我有自动完成和下拉菜单，我的意思是它们都是活动的。但是，一旦我想在我的文本框中添加另一个独特的字符，我的自动完成和我的下拉菜单都不活动。我的意思是他们不会现身。只是在第一次使用show。用什么代码，我可以使自动补全和下拉在每个阶段的独特字符后激活？

浏览 1提问于2011-05-15得票数 0

2回答

用X个时间差运行2个方法？

、、

我有一个麦克风，我想激活它5秒钟，然后获取数据。同时活动线程仍在运行。方法2:用于从文件中收集.amr/.mp3输出。提前谢谢。

浏览 0提问于2018-12-07得票数 1

3回答

使用.net组合框

、、、

我已经将自动完成模式设置为suggest，并将自动完成源代码设置为listitems。当我点击下拉菜单时，它工作得非常好。但当我键入内容时，自动完成模式会激活一个宽度较小的下拉列表。我想知道如何通过代码增加自动完成下拉列表的宽度，以便正确查看列表项。我正在使用C#

浏览 1提问于2010-03-11得票数 6

回答已采纳

4回答

是否仅对模糊进行ASP.NET Remote验证？

、

我在MVC3中使用的是远程验证，但只要我输入一些东西，它似乎就会触发，如果这是该字段第二次激活的话。问题是我有一个自动完成框，所以他们可能会单击一个结果来填充字段，MVC将其视为“离开”它。即使不考虑自动完成这件事，我也不希望它在编写到一半时尝试验证。有没有办法让我说“只在他们完成输入后n毫秒运行验证”或“只在模糊上运行验证”？

浏览 5提问于2011-03-23得票数 12

回答已采纳

1回答

我们是否可以并行调用管道并让多个实例运行？

我有一个场景，我必须执行来自不同管道的管道来记录验证。我们能用这样的管道吗？是否有自动应用的锁？

浏览 5提问于2022-09-30得票数 0

1回答

Notepad++宏不处理向下按钮

、

我已经写了一个SQL宏，它可以将Notepad++查询转换成Vb字符串，然后粘贴到我的VB代码中。下面是我的Macro的样子： &l

浏览 0提问于2016-11-08得票数 1

2回答

使用DropDown自动完成WatiN菜单测试

我正在使用WatiN测试一个自动完成的下拉列表。当用户在输入3个字符后在字段中输入时，将触发jquery自动完成，并显示一个无序列表。用户必须从列表中进行选择。我无法使用WatiN从列表中选择/触发自动完成。我发现了两个问题:第一，WatiN在输入字段中的输入很难触发自动完成菜单的出现，其次，单击菜单项并不会导致自动完成。我发现，向输入字段发送向下键事

浏览 1提问于2011-09-15得票数 3

回答已采纳

2回答

命令'Syso(Ctrl +“space")‘在Eclipse IDE中不起作用

、

我的Eclipse IDE (Juno版)在按照规则进入Syso(Ctrl键+空格键)时无法显示System.out.println()。如何修复它？为什么会发生这种反复无常的行为？让我告诉你，这种情况并不总是发生，但有时确实会发生！我的操作系统是Windows 8，64位系统。

浏览 4提问于2016-04-12得票数 0

2回答

如何在WPF中实现这种用户界面？

我有两个面板，左边的网站代表列表的选项或菜单和右边将列表的用户控件分配给左侧的菜单项作为列表框或项目控件。要求是基本的想法是减少标题面板中的点击次数。右边是大量的UI元素，所以用户想要避免

浏览 0提问于2010-12-13得票数 5

回答已采纳

1回答

我在设置为使用窗体身份验证的站点中使用自动完成扩展程序，但是我没有使用FormsAuthentication.SetAuthCookie。相反，正在创建authCookie并将其添加到响应中。自动完成被设置为在包含的页面中使用页面方法。该方法使用WebMethod和ScriptMethod属性进行修饰。当我尝试激活自动完成时，出现问题，我收到一个对话框，要求对web服务器进行身份验证。我已经在web方法所属的页面上了，我不明白为什么

浏览 0提问于2011-07-22得票数 1

回答已采纳

1回答

动态取消<input>的自动填充菜单

、、、、

它应允许用户在输入菜单为空白时使用“自动填充”菜单进行填充；如果输入中有文本，则禁用“自动填充”菜单；如果同时显示“自动填充”菜单，则将其关闭。 } $(&

浏览 2提问于2016-09-20得票数 0

回答已采纳

1回答

在PyCharm中显示下拉菜单的程序

、、

当您输入(对象)时，似乎无法根据附加图片在PyCharm上找到下拉方法菜单，并且会有一个(方法菜单)列表，您可以从中进行选择，而无需搜索它们。

浏览 0提问于2021-03-21得票数 0

5回答

如何在iTerm2中启用自动完成

、、

在我的默认Mac终端中，我只需输入cd U + tab，它就自动完成到cd Users/。我如何让它在iTerm2中工作呢？

浏览 6提问于2017-07-02得票数 42

回答已采纳

1回答

SQL事务在通过PHP启动时无法工作

、、、、

'; ';你知道它为什么不起作用吗？

浏览 2提问于2013-10-29得票数 0

回答已采纳

2回答

上下文-在Emacs中弹出不敏感的完成？

、

我正在尝试从Vim到Emacs的转换，而我真正忽略的Vim特性之一是上下文--无意义的完成弹出(CTRL-n和CTRL-p)。例如，在下面的缓冲区中，如果我要键入he然后输入CTRL-n，我将得到一个弹出窗口：如何在Emacs中获得类似的上下文--不敏感的完成菜单？此外，我知道M-/将触发自动完成，但它只循环匹配；我想要一个弹出列表显示匹配。

浏览 3提问于2013-07-29得票数 3

回答已采纳

2回答

如何在用户登录后切换菜单？

我正在尝试创建一个寄存器/登录链接，格式为"Register“，它是为匿名用户显示的，并在用户登录时与用户菜单切换。我知道我可以在template.php中将这些链接作为变量进行预处理，但不知道如何从template.php访问用户菜单以编写if语句。

浏览 0提问于2012-10-18得票数 1

回答已采纳

1回答

jQuery并行自动补全

、、

我有一个jQuery自动完成附加到一个文本框输入元素，它工作得很好。我有一个特殊的要求，其中我将需要有两个不同的数据显示下拉菜单。因此，用户将在输入文本框中键入内容，当他键入文本框时，它将并排显示两个下拉列表，并根据他键入的内容同时过滤这两个下拉框。有人知道我是怎么做到的吗？

浏览 3提问于2015-08-29得票数 0

1回答

在emeditor的同一选项卡中，在相同的单独窗口中显示过滤结果和原始数据

我想要显示过滤结果，原始数据在不同的窗口(顶部，底部)在相同的标签在em编辑器中。在em编辑器中可以吗？这是我在em编辑器中没有看到的特性。到目前为止，如果我在em编辑器中应用过滤器，那么只会在隐藏原始数据的同一文档中显示过滤器结果。但我想要显示原始数据，过滤数据在不同的窗口，但在同一个标签。您可以将过滤后的数据保存在底部窗口中。顶部窗口中的原始数据。但是所有的窗口都应该是可见的。请帮帮我。

浏览 61提问于2020-10-13得票数 0

1回答

是否有可能在同一个页面/组件上有两个不同设计的选定类？

、、、

Svelte有一个很好的定义类设计的，但是在一个组件中可以定义两个不同的类吗？我正在处理菜单，它在一个组件中。当页面重新加载时，我需要“选择”两个按钮，一个来自主菜单，另一个来自子菜单，但似乎即使类有不同的名称和变量，它也只激活其中的一个--第一个按钮。是否可以同时在一个组件中选择更多的类/活动按钮？

浏览 4提问于2022-04-12得票数 0

回答已采纳

点击加载更多