md-select mit einer Sucheingabe in einem md-tab

Question

Ich habe ein Problem beim Verschachteln eines md-select mit einer Sucheingabe innerhalb einer md-tab Direktive.

Es gibt zwei Probleme:

1. Sobald das Auswahlfeld erweitert, hat man die Sucheingabe, um nach oben zu sehen ist
2. Die Sucheingabe nicht tatsächlich einen beliebigen Text akzeptieren

I ein codepen illustrieren besser gemacht, was ich meine:

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

Angularjs 1.5.3 Angular-Material 1.0.9

Dank

Answer 1

hatte ich genau das gleiche Problem, und ich schaffte es zu lösen, indem das Tun folgt

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

und dann in meinem Controller definiert ich eine Reihe von Zeichen-Codes, die

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

im Suchtext angezeigt werden should'nt und meine updateSearch Funktion sieht wie folgt aus

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

Ich hatte auch dieses Problem, aber löste es, indem ich dieser Lösung folgte. Dies ist mein HTML-Code

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