Как преобразовать поле ввода в раскрывающийся список в angular8

Question

У меня есть требование, при котором вначале это будут поля ввода, основанные на выборе одного выпадающего списка, цифровой код будет автоматически сгенерирован в другое поле ввода. Автогенерированный код поля ввода должен быть редактируемым, где он должен быть выпадающим с полем поиска, и поле поиска должно содержать поиск по имени или номеру. Я использовал плагин ngx-typeahead, чтобы сделать эту работу, но я не удовлетворен тем, что я сделал, мне нужно, чтобы при нажатии на это поле ввода отображался раскрывающийся список, и на основе поиска он должен показывать мне значения, основанные на поиске. Любая идея о том, как это можно реализовать?

DEMO: DEMO

HTML:

 <div class="form-group">
              <label for="">Group Agent</label>
              <input type="text" class="form-control" placeholder="Group Code" name="groupCode"
                formControlName="groupAgent" name="groupCode" ngxTypeahead 
                [taList]="staticList" autocomplete="off" (keyup)="handleStaticResultSelected($event.target.value)"
                (taSelected)="handleStaticResultSelected($event)">
            </div>

TS:

 public handleStaticResultSelected (result) {
    if(result == ''){
      this.getGroupCodeDefaultValues()
    }
  }

Answer 1

Вы можете достичь этого, используя пакет ng2-completeter. Ссылка здесь https://www.npmjs.com/package/ng2-completer

Теперь, следуя шагу, вы должны следовать

Шаг 1 В приложении .module.ts

import { Ng2CompleterModule } from "ng2-completer";

Шаг 2 hero.component.ts

import { CompleterService, CompleterData } from 'ng2-completer';

Шаг 3 В конструкторе hero.component.ts

 constructor(private completerService: CompleterService) {
 this.dataService = completerService.local(this.dataArray}

Шаг 4 В файле шаблона hero.component.ts

<h1>Search color</h1>
<ng2-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ng2-completer>

Answer 2

Вы можете просто использовать Primeng p-dropDown. https://www.primefaces.org/primeng/showcase/# / выпадающий список или https://www.primefaces.org/primeng/showcase/# / множественный выбор Зачеркните, это также легко стилизовать.