Typescript 如何在Priming下拉列表中显示搜索结果

我试图在键入输入文本长度大于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>

---

您可以使用

[隐藏]

进行此操作

如果长度

=3

，只需返回一个布尔值

[hidden]="ShowDropdown($event)"

应用程序组件：

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

或在HTML中内联（应等效）：

---

我认为在这里，启动AutoCmplate更好，因为它可以使下拉组件像autocomplate一样工作，使用autocomplate component，您可以设置文本查询的分钟长度

模板

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

组成部分

搜索（{query=”“}）{
如果（查询==“”）{
this.result=[…this.cars]；
}否则{
this.result=this.cars.filter（c=>
c、 label.toLowerCase（）.includes（query.toLowerCase（））
);
}
}

---

演示您将隐藏标记应用于何处？请理解我的问题。我无法添加隐藏属性。我只能使用inputId，primingdropdown项的一部分将被组件内部搜索方法隐藏，因此如果我们不尝试添加逻辑来隐藏它会更好。仍然，autocomplate组件比DropdOnthis更好不可能您无法将cutome filter方法传递给组件在这种情况下为什么不使用autocomplate？@malbarmavi:您可以更新autocomplete吗？@malbarmavi:我们可以使用filter选项吗？请检查我关于使用onkeyup事件的Priming autocomplete解决方案不起作用的答案：为什么需要

onkeyup

搜索方法会起作用当长度超过3时，还有其他方法，如选择

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

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