使用键盘输入 md-select 中的 select 项

Question

我正在使用 augular/material2 md-select。当我进入 md-select 组件时，我可以使用向上和向下箭头指向 select 项目。我还可以按 space 栏来查看列表，并使用上下箭头和回车键 select 一个项目。我不能做的是按一个项目的第一个字母并让该项目 selected.

使用 https://material.angular.io/components/component/select 上的示例，我希望能够切换到 md-select 组件并按 P 到 select 披萨。这不支持吗？有解决办法吗？

谢谢

Answer 1

在 material 文档中，仅支持以下键盘交互：

DOWN_ARROW: 关注下一个选项
UP_ARROW: 聚焦上一个选项
ENTER 或 SPACE：Select 重点项目

'press the first letter of an item and have that item selected'的功能很难实现，因为很难预测列表中可能存在多少首字母相同的项目。如果列表中有 PIZZA、POPCORN、PASTA 项，应按 'P' 选择哪个项？

如果您正在考虑按字母过滤项目，那么您可能想看看 md-autocomplte。

https://material.angular.io/components/component/autocomplete

Answer 2

这是我为处理这种情况而编写的 class，因为它不再作为默认实现工作。

class FindValue {
    lastIndex: number = -1;

    constructor(private _toString?: Function) {
    }

    findIndex(values, startIndex, char) {
        for (let ii = startIndex; ii < values.length; ii++) {
            let value;
            if (this._toString) {
                value = this._toString(values[ii]);
            } else {
                value = values[ii];
            }
            if (value && value.toLowerCase().startsWith(char)) {
                return ii;
            }
        }
        return -1;
    }

    find(values, char) {
        let value;
        let index = this.findIndex(values, this.lastIndex + 1, char);
        if (index < 0 && this.lastIndex >= 0) {
            index = this.findIndex(values, 0, char);
        }

        if (index >= 0) {
            this.lastIndex = index;
            return values[index];
        }

        return null;
    }
}

如果我将 (keypress)="selectKeyPress($event)" 添加到 mat-select 组件，然后我会像这样实现它。

constructor() {
    this.findValue = new FindValue(value => value.name);
}

selectKeyPress($event) {
    var inp = String.fromCharCode($event.keyCode);
    if (/[a-zA-Z]/.test(inp)) {
        let value = this.findValue.find(this.values, inp);
        if (value) {
            // Set the ngModel value to this value.
        }
    }
}

该对象将保持最后找到的索引的状态，这样它将循环遍历以按下的字母开头的所有项目，如果您连续按下同一个字母，如果它是最后一个，则再次回到第一个一。我的对象有一个名称属性，用于在 select 框中显示。如果您只有一个字符串对象，则可以在构造函数调用中省略该函数。

使用键盘输入 md-select 中的 select 项

Using keyboard to select items in md-select

angular-material2