Question

我正在使用augular / material2 md-select。当我选中md-select组件时，我可以使用向上和向下箭头选择项目。我也可以按空格键查看列表，然后使用向上和向下箭头以及回车键选择项目。我不能做的是按一个项目的第一个字母并选择该项目。

使用https://material.angular.io/components/component/select上的示例我希望能够选中md-select组件并按P选择Pizza。这不受支持吗？有工作吗？

由于

Answer 1

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

DOWN_ARROW：关注下一个选项
UP_ARROW：关注上一个选项
ENTER或SPACE：选择焦点项目

按下项目的第一个字母的功能，并选择该项目＆＃39;难以实现，因为很难预测，列表中可能存在多少具有相同首字母的项目。如果列表中有PIZZA，POPCORN，PASTA等项目，应按“＆＃39; P＆＃39;”选择哪个项目？

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

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

Answer 2

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

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.
        }
    }
}

对象将保持最后找到的索引的状态，以便循环显示以按下的字母开头的所有项目，如果您连续按下相同的字母，并且如果它是最后一个，则再次到达第一个。我的对象有一个name属性，我用它来显示在选择框中。如果您只有一个字符串对象，则可以在构造函数调用中省略该函数。

使用键盘选择md-select中的项目

2 个答案: