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()没有向我显示建议列表，我想我应该在(completeMethod)中致电onFocus，但我不知道怎么做？

Answer 1

自动填充功能包含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

Answer 2

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

在具有函数onClear的模板绑定clearItem()事件中：

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

在触发clearItem()事件的组件实现功能onClear中：

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

使用PrimeNG自动填充组件

2 个答案: