Angular/Primeng - 实现无按钮的 p-autocomplete 下拉菜单

Question

我有一个启用了多个条目和下拉菜单的 "p-autocomplete" 元素，我想知道我是否可以在不显示按钮的情况下这样做，而是在用户单击自动完成字段时显示下拉菜单。

这种类型的对象可能吗？

我正在使用 Primeng 4.3.0 版，如果它有所不同的话。

HTML:

<p-autoComplete id="input-country" [multiple]="true" [(ngModel)]="selectedCountries" [dropdown]="true"
          [suggestions]="filteredCountries" (completeMethod)="filterCountryMultipe($event)">
                 <ng-template let-selectedCountries pTemplate="item">
                 ....
          </ng-template>
 </p-autoComplete>

=================== 更新===================== 感谢 olivier-depriester 的回答。除了 onFocus 方法之外，我还删除了下拉列表属性并使用自动完成处理所有内容，只需修改 filter 方法以接受空查询。

当前 HTML:

<p-autoComplete id="input-country" [multiple]="true" [(ngModel)]="selectedCountries" (onFocus)="onFocus()"
                    [suggestions]="filteredCountries" (completeMethod)="filterCountryMultiple($event)" >
                <ng-template let-selectedCountries pTemplate="item">
                    ....
                </ng-template>
            </p-autoComplete>

当前打字稿：

onFocus(){
    this.filterCountryMultiple({query:''});
    this.autoComplete.show();
}

filterCountryMultiple(event) {
    let query = event.query;
    this.filteredCountriesMultiple = this.filterCountry(query);
}

filterCountry(query):any[] {
....
    for(let i = 0; i < countries.length; i++) {
        let country = countries[i];
        if(...query is empty...){
            filtered.push(country.code);
        }
        else if(...match found...) {
            filtered.push(country.code);
        }
    }
    return filtered;
}

Answer 1

对于 primeng 6.5 到 7.0，我使用了 show 函数，绑定在 focus 事件上。

在打字稿方面：

export class MyComponent {
    @ViewChild(AutoComplete) private autoComplete: AutoComplete;

    onFocus() {
        this.autoComplete.show();
    }
}

HTML 一侧：

<p-autoComplete id="input-country" [multiple]="true" [(ngModel)]="selectedCountries" [dropdown]="true"
    [suggestions]="filteredCountries"
    (completeMethod)="filterCountry($event)"
    (onFocus)="onFocus($event)">
         <ng-template let-selectedCountries pTemplate="item">
             <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                   .......
         </ng-template>
</p-autoComplete>

但是在primeng当前版本（v8）中，这个方法已经没有文档了。所以我不知道它是否还存在

Angular/Primeng - 实现无按钮的 p-autocomplete 下拉菜单

Angular/Primeng - Implement p-autocomplete dropdown with no button

html

autocomplete

dropdown

primeng

angular