Question

在使用md-tab指令内的搜索输入嵌套md-select时出现问题。

有两个问题：

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

我做了一个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];

我的updateSearch函数看起来像这样

  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>

Answer 3

试试这个有效的短代码：

将 onkeydown =＆＃34; event.stopPropagation（）＆＃34; 添加到输入元素。

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

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

3 个答案: