键入时禁用 matSelect 上的默认搜索

Question

使用默认 html select，您可以使用键盘搜索此列表中的元素，但默认延迟有点短。我需要找到一个解决方案来延长这个计时器。

我正在使用 material 和 angular 6，但我没有找到内置解决方案（没有属性或文档中的选项）。我试图制定自己的解决方案，但默认事件覆盖了我的。

这是我使用 material 的实现：https://stackblitz.com/edit/material-tooltip-select-search?file=src%2Fapp%2Fapp.component.html

如你所见，如果我给小费 't'、'o'、'n' 然后 'i'，Toni 被 selected 大约 0.1 秒浏览器 select 以 'i' (Iris) 开头的名字。

除了实现我自己的（或使用 material 搜索组件，这不是我的想法）还有其他解决方案吗？或者有没有办法禁用默认事件？

提前致谢！

解决方案：

根据Marshal的回答，我做了一个指令来完成这项工作：https://stackblitz.com/edit/material-select-search?file=src%2Fapp%2Fselect-search.directive.ts

Answer 1

似乎将此添加到您的组件以停止 keydown 事件的默认传播就可以了。

constructor(){
     document.addEventListener('keydown', e => {
      if ((e.target as any).nodeName === 'MAT-SELECT') {
        e.stopImmediatePropagation();
      }
    }, true);
  }

请参考此 github 问题，其中提供了一个 stackblitz 示例。

https://github.com/angular/material2/issues/11654

您需要抓住 keydown 事件和 stopImmediatePropagation()，然后它会逐渐上升到 view/mat-select..这就是为什么 <mat-select placeholder="Favorite food" (keydown)="" 不会解决这个问题，因为事件已经被处理由 mat-select 组件在通过模板触发 (keydown) 输出时触发。

键入时禁用 matSelect 上的默认搜索

Disable default search on matSelect when keyup

angular-material2

angular