使用 PrimeNG 自动完成组件显示关于焦点的建议答案

【问题标题】：Show suggestion on focus using PrimeNG autocomplete component使用 PrimeNG 自动完成组件显示关于焦点的建议
【发布时间】：2019-10-29 15:18:50
【问题描述】：

当用户点击输入字段时，我会自动完成显示建议。

目前仅当用户输入字符时才会显示建议。

<p-autoComplete [formControl]="control.controls.EJ_Id_Name" 
  [suggestions]="results" 
  (completeMethod)="search($event,'EJ')" 
  emptyMessage={{noResult}} 
  [autoHighlight]="true">
</p-autoComplete>

我已尝试添加(onFocus) 并传递给它search($event,'EJ')

这是我的搜索功能：

search(event, type) {
    this.searchRmpmService.getResults(event.query, type).then(data => {
        console.log(event);
        if(event.query){
            this.results = this.filterResults(event.query, data);
            console.log(this.results)
        }
        else {

            this.results = ["onfocus"];
            console.log(this.results) // I get "onfocus" on my devtool browser when I focus on the input            }

    });
}

onFocus() 没有显示建议列表，我想我应该在onFocus 中调用(completeMethod) 但我不知道怎么做？

【问题讨论】：

标签： angular primeng

【解决方案1】：

如果您需要在自动完成的输入字段被清除时额外显示建议，这可能会有所帮助。因此将处理 2 个事件：onFocus 和 onClear。这是解决方法：

在模板中将onClear 事件与函数clearItem() 绑定：

<p-autoComplete ...
    #autocomplete
    (onFocus)="!autocomplete.value && autocomplete.handleDropdownClick()"
    (onClear)="clearItem(autocomplete)">
</p-autoComplete>

在触发onClear事件时，在组件中实现函数clearItem()：

clearItem(autocomplete: any) {
    autocomplete.value = '';  
    autocomplete.handleDropdownClick();  
}

【讨论】：

【解决方案2】：

自动完成有onFocus()事件，你可以通过调用.show()方法来显示建议。

<p-autoComplete  #autoComplete [formControl]="control.controls.EJ_Id_Name" 
  (onFocus)="autoComplete.show()"
  [suggestions]="results" 
  (completeMethod)="search($event,'EJ')" 
  emptyMessage={{noResult}} 
  [autoHighlight]="true">
</p-autoComplete>

编辑：

自动完成似乎有一个错误，作为一种解决方法，你可以试试这个

<p-autoComplete  #autoComplete [formControl]="control.controls.EJ_Id_Name" 
  (onFocus)="!autocomplete.value && autocomplete.handleDropdownClick()"
  [suggestions]="results" 
  (completeMethod)="search($event,'EJ')" 
  emptyMessage={{noResult}} 
  [autoHighlight]="true">
</p-autoComplete>

Source

【讨论】：

可行，但我得到一个空矩形。如何将值传递给show() 方法？
我有一个小问题是当我选择一个值时，建议面板仍然可见
我得到了解决方案：添加(onFocus)="!autocomplete.value && autocomplete.handleDropdownClick()"
我们可以发布角度和包版本吗？？？不得不为这些信息寻找相当多的东西......谢谢
对我有用的是调用 this.autocomplete.hide();然后 this.autocomplete.show();