在md-tab中使用搜索输入进行md-select

Question

在使用md-tab指令内的搜索输入嵌套md-select时遇到问题.

有两个问题:

1. 选择框展开后,必须向上滚动才能查看搜索输入
2. 搜索输入实际上不接受任何文本

我做了一个codepen来更好地说明我的意思:

  <md-tab label="Search does not work here">
    <md-input-container class="md-block" flex>
      <label>Vegetables</label>
      <md-select
        multiple
        ng-model="selectedVegetables"
        md-on-close="clearSearchTerm()"
        data-md-container-class="selectdemoSelectHeader">
        <md-select-header class="demo-select-header">
          <input
            type="search"
            ng-model="searchTerm"
            placeholder="Search.."
            class="demo-header-searchbox md-text">
        </md-select-header>
        <md-optgroup label="vegetables">
          <md-option
            ng-value="vegetable"
            ng-repeat="vegetable in vegetables | filter:searchTerm">
              {{vegetable}}
          </md-option>
        </md-optgroup>
      </md-select>
    </md-input-container>
  </md-tab>

Angular.js 1.5.3角材料1.0.9

谢谢

Answer 1

我遇到了完全相同的问题，我设法通过执行以下操作来解决它

<md-select-header class="demo-select-header">
    <input 
        ng-model="formData.searchTerm"
        type="search"
        placeholder="Search for a student.."
        aria-label
        class="demo-header-searchbox _md-text"
        ng-keydown="vm.updateSearch($event)">
</md-select-header>

然后在我的控制器中，我定义了一个不应在搜索文本中显示的字符代码数组

vm.bannedCodes = [ 8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,

106,107,109,110,111,112,113,114,115,116,117,118,119,120,121,121,123,144,145];

更新搜索功能

  function updateSearch(e){
   e.stopPropagation();
   if(vm.bannedCodes.indexOf(e.keyCode) < 0){
    if(e.keyCode == 8){
      $scope.formData.searchTerm = 
          $scope.formData.searchTerm.substring(1, $scope.formData.searchTerm.length -1);
    }
  }
}

Answer 2

我也遇到了这个问题，但通过遵循此解决方案解决了它。这是我的 HTML 代码

<md-input-container>
    <label></label>
    <md-select ng-model="selectedVegetables">
        <md-select-header>
            <input ng-model="searchTerm"  class="_md-text"    onkeydown="mdSelectOnKeyDownOverride(event)">
    </md-select-header>
    <md-optgroup>
        <md-option></md-option>
    </md-optgroup>
    </md-select>
</md-input-container>