在 md-tab 中带有搜索输入的 md-select答案

【问题标题】：md-select with a search input inside an md-tab在 md-tab 中带有搜索输入的 md-select
【发布时间】：2019-06-19 15:27:01
【问题描述】：

在 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

谢谢

【问题讨论】：

标签： angularjs angular-material

【解决方案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);
    }
  }
}

【讨论】：

e.stopPropagation() 是允许输入接受文本的关键。
如果可能请提供演示链接

【解决方案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>

【讨论】：

AngularJs 文件：- window.mdSelectOnKeyDownOverride = function(event) { event.stopPropagation(); };
完美！！！ window.mdSelectOnKeyDownOverride = function(event) { event.stopPropagation(); };我爱你

【解决方案3】：

试试这个有效的短代码：

将 onkeydown="event.stopPropagation()" 添加到输入元素。

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

【讨论】：