角度2下拉过滤器

Question

我编写了一些代码来创建一个包含过滤器的下拉框。目前它看起来像是这样：

正如您所看到的，过滤器字段在下拉列表中显示为一个选项，但我想要做的是将下拉列表作为过滤器，无需额外的字段。我可以在此处找到我的目标示例：http://valor-software.com/ng2-select/

我认为它只需要重新安排我的代码。目前它看起来像这样：

<div class="form-group">
    <label class="center-item" [innerHtml]="label"></label>

    <!-- Caret/Button -->
    <div ngbDropdown class="d-inline-block dropdown-group" #selectDropdown="ngbDropdown">
        <button type="button" class="btn btn-secondary" id="SelectDropdownMenu" ngbDropdownToggle>
            <span class="pull-left" [innerHtml]="selected[optionSettings.display] || notSetText || optionSettings.placeHolder"></span>&nbsp;
            <span class="caret pull-right"></span>
        </button>

        <!-- Dropdown Filter -->
        <ul class="dropdown-menu select-dropdown-menu" aria-labelledby="SelectDropdownMenu">
            <li class="dropdown-item filter-group">
                <div class="input-group input-group-sm filter">
                    <input type="text" 
                           placeholder="{{ optionSettings.filterPlaceHolder }}" 
                           aria-describedby="sizing-addon3"
                           (click)="$event.stopPropagation(); selectDropdown.open();" 
                           [(ngModel)]="filterText">
                    <span class="fa fa-times-circle-o pull-right" (click)="$event.stopPropagation(); selectDropdown.open(); clearSearch($event)">
                    </span>
                </div>
            </li>

            <!-- Dropdown Items Select -->
            <li class="dropdown-item select-dropdown-item" (click)="setDeselected($event)"><a>Not Set</a></li>
            <li class="dropdown-item select-dropdown-item" *ngFor="let option of options | SelectFilter: { filter: filterText, field: optionSettings.display }"
                (click)="setSelected($event, option)">
                <a [innerHtml]="option[optionSettings.display]"></a>
            </li>
        </ul>
    </div>
</div>

我尝试过移动标签但没有成功。非常感谢任何帮助。