2

我试图在输入文本长度超过 3 后显示搜索结果如果文本长度小于 3，我想隐藏搜索结果区域。我只能使用 inputId 作为标识符。如何在启动下拉列表中实现这一点。

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 演示

4

2 回答 2

0

你可以用[hidden]这个。

如果长度为 ，则返回一个布尔值>= 3。

[hidden]="ShowDropdown($event)"

应用组件：

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

或者在 HTML 中内联它（应该是等效的）：

[hidden]="$event.value.length >=3"
于 2020-03-17T14:30:39.667 回答
0

我认为primeng autocpmplate在这里更好，rty使下拉组件像autocomplate一样，使用autocomplate组件你可以设置文本查询的最小长度

模板

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

你只需要像这样提供 serach 方法

零件 

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

演示

于 2020-03-18T09:25:31.503 回答