angular - 使用 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。这是解决方法:

在模板绑定(bind) onClear 事件与功能 clearItem():

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

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

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