代码之家 › 专栏 › 技术社区 › Hamza Haddad

使用PrimeNG autocomplete组件显示焦点建议

primeng angular

Hamza Haddad · 技术社区 · 8 年前

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

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

<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 但我不知道怎么做?

2 回复 | 直到 8 年前

boisamazing 6 年前

如果您需要在清除“自动完成”的输入字段时另外显示建议,这可能会有所帮助。因此,将处理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();  
}

Kld 8 年前

自动完成具有 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>

编辑:

似乎自动完成有一个bug,作为一种解决方法,您可以试试这个

<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