Angular- 添加事件侦听器 "input" 并防止用户发送垃圾邮件

Question

我正在使用 Angular、Javascript 以及 Typescript 和 Ionic。我有一个函数 createDropdown(inputField, arrayOfItems) 它将一个下拉列表附加到正在传递的输入字段，并使用提供的数组填充下拉列表。

这将用作“自动完成”下拉菜单，这就是为什么我需要添加一个事件侦听器“输入”，因此它看起来像这样：

createDropdown(inputField, arrayOfItems){
  inputField.addEventListener("input",()=>{
  //Logic to create dropdown
  });
}

问题是，在将事件侦听器添加到输入字段后，如果用户从键盘输入垃圾键“A”，则会造成滞后或延迟，最终应用会崩溃。有没有办法防止这种情况发生？我试过“keyup”，它修复了它。但是，通过这种方式，按键盘上的任意键将触发 createDropdown 函数，例如：按“Control”或“Alt”。

最终结果应该是，让用户在输入字段中键入内容，然后匹配的结果应该显示在下拉列表中，以便用户可以从中 select。他们输入的越多，结果就越准确。

Answer 1

例如，您可以使用 setTimeout() + 微调器的实现。

举个例子说明我的意思

Answer 2

您要找的是“去抖动输入”。看这里：

Angular- Adding event listener "input" and prevent user from spamming a key