如何在primeng下拉列表中显示搜索结果答案

【问题标题】：How to show search result in primeng dropdown如何在primeng下拉列表中显示搜索结果
【发布时间】：2020-06-28 15:32:54
【问题描述】：

我试图在输入文本长度超过 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 demo

【问题讨论】：

这是不可能的，你不能将cutome过滤器方法传递给组件
为什么在这种情况下不使用自动编译？
@malbarmavi：你能更新自动完成功能吗？
@malbarmavi：我们可以使用过滤选项吗？
检查我关于primeng自动完成解决方案的答案????

标签： typescript angular8 primeng primeng-dropdowns

【解决方案1】：

我认为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())
      );
    }
  }

demo ?

【讨论】：

无法使用 onkeyup 事件：stackblitz.com/edit/…
为什么需要onKeyUp 搜索方法在长度大于3并且有其他方法如select时有效

【解决方案2】：

您可以为此使用[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"

【讨论】：

你把隐藏标签应用到什么地方？
请理解我的问题。我无法添加隐藏属性。我只能使用启动的 inputId 部分
下拉项会被组件内部搜索方式隐藏，所以最好不要尝试添加逻辑来隐藏它
我还是觉得 autocomplate 组件比 dropdwon 好