typescript - Hur man visar sökresultat i primeng-dropdown

Jag försöker visa sökresultat efter att den inmatade textens längd är mer än 3. Om textens längd är mindre än 3 vill jag dölja området för sökresultat. Jag kan bara använda inputId som identifierare. Hur kan jag uppnå detta i en priming dropdown?

app.component.html:

<p-dropdown 
  [options]="cars"
  inputId="listDDOne"
  [(ngModel)]="selectedCar"
  [style]="{'width':'100%'}"
  scrollHeight="400px"
  filter="true"
  resetFilterOnHide="true"
  (keydown.enter)="MyKeydownEnter($event)"
  (keydown)="MyKeydown($event)"
  (onChange)="OnChange($event)">
  <ng-template let-item pTemplate="selectedItem">
    {{item.label}}
   </ng-template>
   <ng-template let-car pTemplate="item">
    <div class="drop-item"
      (click)="MyItemClick($event)">

      <span class="drop-item-label"
        [ngClass]="car.disabled ? 'disabled' : ''">
        {{car.label}}
      </span>

      <span class="drop-item-value"
        [ngClass]="car.disabled ? 'disabled' : ''">
        {{car.value}}
      </span>
    </div>
    </ng-template>    
 </p-dropdown>

app.component.ts:

MyKeydown(event) {
console.log("MyKeydown", event.value);

if(event.value.length>3){ 
  event.stopPropagation();
  event.preventDefault(); 

  ????
} 
}

stackblitz-demo

Svar #1

Du kan använda [hidden] för detta.

Returnera bara ett boolean om längden är >= 3.

[hidden]="ShowDropdown($event)"

App-komponent:

ShowDropdown(event) {
    return event.value.length >= 3;
    //same as 
    //return event.value.length >= 3 ? true : false;
}

Eller bädda in det i HTML (bör vara motsvarande) :

[hidden]="$event.value.length >=3"

Svar #2

Jag tycker primeng autocomplete är bättre här än att försöka få dropdown-komponenten att fungera som autocomplete, med autocomplete-komponenten kan du ställa in minimilängden på textfrågan

mall

<p-autoComplete 
   [minLength]="3" 
   [dropdown]="true" 
   [(ngModel)]="selectedValue" 
   field="label" 
   [suggestions]="result" 
   (completeMethod)="search($event)" >
</p-autoComplete>

du behöver bara tillhandahålla sökmetoden som detta

komponent

  search({ query = "" }) {
    if (query == "") {
      this.result = [...this.cars];
    } else {
      this.result = this.cars.filter(c =>
        c.label.toLowerCase().includes(query.toLowerCase())
      );
    }
  }

demo 🚀