键入 @ 时 Angular 中的自动建议下拉菜单

Question

我想在 Angular 8 中实现自动完成下拉菜单等功能。 我有一个文本框，我将在其中键入要发送给用户的任何消息。如果我输入"@"，那么它应该会给我当前可用的用户名的所有建议（我将从网络服务收到这些建议，或者我将拥有手动创建的 JSON 数据）。

我已经完成了 angular-mention，但它在我的情况下没有用，所以我不能使用它。

任何人都可以帮助我，或者任何人都可以提供任何有用的链接吗？

提前致谢！

Answer 1

• 在 @ 的文本框中使用 HostListener。
• 如果任何值通过服务匹配，则使虚拟下拉列表可见。
• 在下拉选择中，将其值附加到文本框。

Answer 2

因此，如果我理解正确，您希望在键入“@”时加载所有可用的用户名。它可能因您的实现而异，但我会在调用 Web 服务之前进行检查，并将“@”替换为 null/空字符串（以更适合您的用户名过滤方法的为准）以返回所有可用的用户名。

如果您可以分享一些代码以查看您的位置，那么为您提供帮助会更容易。但默认方法是将 @ 替换为一些默认值，以从服务中获得“未经过滤”的结果。

但是，请非常小心加载所有可用的用户名。在大多数情况下，使用分页查询更合适，一次只加载 5 / 10 / 100 个结果（取决于用例，我不会真的超过 1000）。我认为一次为自动完成下拉列表加载超过 5 / 10 个项目是不必要的，而且通常是一种不好的做法。