Searchable select options

Question

How can I add a search option to my select box? Im using angular, bootstrap and typescript. And this is my code:

          <div class="input-group">
        <label htmlFor="ca" class="sr-only"> C. Autónoma:</label>
        <select class="custom-select w-100 my-2 form-control-lg mb-lg-0" title="selection" type="text" id="ca" name="ca" #comunidadAutonoma [(ngModel)]="universidad.cAutonomaId" >
          <option [value]="a" disabled selected hidden>Comunidad Autónoma</option>
          <option *ngFor="let c of cAutonomas" name="ca" [ngValue]="c.id" >{{c.nombre}}</option>
        </select>
      </div>

Ok, so I updated my code to this and search worked BUT new problem...

              <div class="input-group">
            <label htmlFor="categoria" class="sr-only"> Categoría:</label>
            <ng-select [disabled]="vista === vistas.DETALLE" class="custom-select w-100 my-2 form-control-lg mb-lg-0" title="category" type="text" id="cat" name="categoria" #categoria [(ngModel)]="asignatura.categoriaId"  placeholder="Categorías">
              <ng-option *ngFor="let c of categorias" name="ca" [ngValue]="c.id" >{{c.nombre}}</ng-option>
            </ng-select>
          </div>

my categoriaId now shows like this . I need it like before, any suggestions?. Why ng-selec and ng-option changed that?

this is my ts code too

  fnCrear():void{
  this.asignatura.activa = true;
  this.categoria = this.asignatura.categoria;
  if (!this.comprobacion()) {
    this.msgError = "Por favor, rellena todos los datos necesarios.";
    return;
  }

  this.msgError = undefined;
  this.asignaturasService.createAsignatura(this.asignatura)
    .subscribe(res => {
      this.router.navigate(['/asignaturas']);
      this.toastr.success("Creado correctamente", this.asignatura.tipo, { progressBar: true });
    },
    err => this.toastr.error("Ha ocurrido un error al intentar registrar la asignatura."));
}