Wie füge ich ein Suchfeld in das select-Element ein, das von angular-formly generiert wurde

Question

Ich versuche ein Suchfeld in select-Elementen einzufügen. Ich verwende eine eckige Bibliothek mit eckig-formellem Material für das Materialdesign. Ich versuche, etwas ähnliches zu Winkel Material Auswahlbox zu erreichen, wie in pick a vegetable example

AUSGABE gezeigt

Ich bin in der Lage das Suchfeld, um zu sehen, aber ich kann in dieses Feld nicht eingeben. Daher funktioniert das Filtern nicht. Ich habe keine Ahnung, wo ich einen Controller-Code wie im Beispiel beschrieben setzen soll.

CODE

formlyConfig.setType({ 
    name: 'select', 
    template: '<md-input-container>' 
     +'<label for="{{id + \'_\'+ $index}}">' 
     +' {{to.label}}' 
     +' </label>' 
     + '<md-select ng-model="model[options.key]"' 
        + 'md-on-close="clearSearchTerm()"' 
        + 'data-md-container-class="selectdemoSelectHeader"' 
        + '>' 
     +'<md-select-header class="demo-select-header">' 
      +'<input ng-model="searchTerm"' 
        +'type="search"' 
        +'placeholder="Search"' 
        +'class="demo-header-searchbox md-text">' 
      +'</md-select-header>' 
      +'<md-optgroup >' 
      +'<md-option ng-value="option[to.valueProp || \'value\']" ng-repeat="option in to.options |' 
       +'filter:searchTerm">{{option[to.labelProp || \'name\'] }}</md-option>' 
      +'</md-optgroup>' 
     +'</md-select>' 
     +'</md-input-container>' 

    }); 

Answer 1

fand ich die Lösung. Ich habe versucht, einen Controller hinzuzufügen, um das zu beheben, aber das hat nicht funktioniert. Damit dies funktioniert, habe ich die Option link in formular verwendet. Hier ist der Arbeitscode.

formlyConfig.setType({ 
    name: 'select', 
    template: '<md-input-container>' 
     +'<label for="{{id + \'_\'+ $index}}">' 
     +' {{to.label}}' 
     +' </label>' 
     + '<md-select ng-model="model[options.key]"' 
        + 'md-on-close="clearSearchTerm()"' 
        + 'data-md-container-class="selectdemoSelectHeader"' 
        + '>' 
     +'<md-select-header class="demo-select-header">' 
      +'<input ng-model="searchTerm"' 
        +'type="search"' 
        +'placeholder="Search"' 
        +'class="demo-header-searchbox md-text">' 
      +'</md-select-header>' 
      +'<md-optgroup >' 
      +'<md-option ng-value="option[to.valueProp || \'value\']" ng-repeat="option in to.options |' 
       +'filter:searchTerm">{{option[to.labelProp || \'name\'] }}</md-option>' 
      +'</md-optgroup>' 
     +'</md-select>' 
     +'</md-input-container>' 
     , 
     link: function(scope, el, attrs) { 
      el.find('input').on('keydown', function(ev) { 
      ev.stopPropagation(); 
     }); 
     } 

    });