使用 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>

來源