Geek Answers Handbook

Md-select with search input in md-tab

I'm having a problem inserting md-select using search input inside the md-tab directive.

There are two problems:

  • When the selection window expands, you need to scroll up to view the search input
  • Search input doesn't actually accept text

I made codepen to better show what I mean:

<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 Angular-material 1.0.9

thanks

+5
source share
3 answers

I had exactly the same problem, and I was able to solve it by following these steps.

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

Then in my controller, I defined an array of character codes that should not appear in the search text

 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

  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); } } }
+4
source

I also had this question, but he solved it by following this decision. This is my 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>
+3
source

Try this working shortcode:

Add onkeydown = "event.stopPropagation ()" to the input element.

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

More articles:


All Articles