使用 PrimeNG 自动完成组件显示焦点建议

Question

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

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

<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)但我不知道如何调用？

Answer 1

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

在模板中使用函数clearItem()绑定onClear事件：

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

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

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

Answer 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>

来源