如何使用Angular Material Model在下拉列表中添加搜索框？

Question

我在我的应用程序中使用Angular Material Model，但是我无法在drop_down列表的顶部添加搜索框，您能帮助我如何实现它吗？提前致谢。

参考：https://material.angularjs.org/latest/#/demo/material.components.select

<md-select  ng-model="tsCtrl.entry.task" name="task" class="max-label" ng-required="true" placeholder="--select--">
                                                    <md-input-container class="md-input-theme" style="width:75%;float:left;margin-right:10px;" md-theme="input" ng-click="$event.stopPropagation()" flex="">
                                                        <label for="searchinginput_001">&nbsp;</label>
                                                        <input aria-invalid="false" id="searchinginput_001" tabindex="0" class="ng-valid md-input ng-dirty ng-valid-parse ng-touched " ng-change="tsCtrl.SearchingTaskFromLoadedTasks(tsCtrl.tasks,{{task.name}})" ng-model="task.name">
                                                        <div class="md-placeholder">Enter Task ID/ Task Description </div>
                                                    </md-input-container>
                                                   <button tabindex="0" aria-label="Search"  style="margin: 0px;padding: 10px;min-width: 15px;clear:both;" ng-keypress="showSearch = !showSearch" class="md-button md-default-theme" >
                                                        <ng-md-icon class="ng-scope" icon="search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></ng-md-icon>
                                                    </button>
                                                        <!--<div ng-if='tsCtrl.tasks.length > 1' ng-click="tsCtrl.ready(this),$event.stopPropagation();"  style="width: 100%;" class="search-filter__container" >-->
                                                            <!--<input ngFocus="focused=true,$event.stopPropagation();" ng-model="model" placeholder="Enter Task Id or Description"  class="search-filter__input" type="search">-->
                                                        <!--</div>-->
                                                    <md-option style ="clear:both" ng-repeat="item in tsCtrl.tasks  | orderBy:'name'" ng-value="item._id" ng-bind="item.name" ng-selected="(item._id === tsCtrl.entry.task) || (item._id === tsCtrl.entry.selectedTask)"></md-option>
                                                </md-select>



                                                ***********function at controller**                                         ctrl.SearchingTaskFromLoadedTasks =function(tasks,taskName){
            ctrl.stasks=[];
            if(!(taskName==undefined || taskName.isNull() || taskName.isWhitespace())){
                angular.forEach(tasks, function(item){
                  if(item.name.toLowerCase().indexOf(searchCriteria.toLowerCase()) != -1){
                            ctrl.stasks.push(item);
                        }

                });
                ctrl.tasks= ctrl.stasks;
            }

        };