[英]Show suggestion on focus using PrimeNG autocomplete component
I would make autocomplete showing suggestion when user click on input field.当用户单击输入字段时,我会自动完成显示建议。
For the moment suggestions are showed only if user enter characters.目前,仅当用户输入字符时才会显示建议。
<p-autoComplete [formControl]="control.controls.EJ_Id_Name"
[suggestions]="results"
(completeMethod)="search($event,'EJ')"
emptyMessage={{noResult}}
[autoHighlight]="true">
</p-autoComplete>
I have tried to add (onFocus)
and pass to it search($event,'EJ')
我试图添加(onFocus)
并传递给它search($event,'EJ')
Here's my search function :这是我的搜索功能:
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()
does not show me a suggestion list, I guess that I should call (completeMethod)
in onFocus
but I don't know how ? onFocus()
没有向我显示建议列表,我想我应该在onFocus
调用(completeMethod)
但我不知道如何调用?
It may help if you need additionally to display suggestion when the input field of autocomplete is cleared.如果您需要在清除自动完成的输入字段时额外显示建议,这可能会有所帮助。 Therefore 2 events will be handled: onFocus
and onClear
.因此将处理 2 个事件: onFocus
和onClear
。 Here is the workaround:这是解决方法:
In template bind onClear
event with function clearItem()
:在模板中使用函数clearItem()
绑定onClear
事件:
<p-autoComplete ...
#autocomplete
(onFocus)="!autocomplete.value && autocomplete.handleDropdownClick()"
(onClear)="clearItem(autocomplete)">
</p-autoComplete>
In component implement function clearItem()
when onClear
event is triggered:当onClear
事件被触发时,在组件中实现函数clearItem()
:
clearItem(autocomplete: any) {
autocomplete.value = '';
autocomplete.handleDropdownClick();
}
The autocomplete has the onFocus()
event, you can show the suggestions by calling the .show()
method.自动完成有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>
Edit:编辑:
It seems like there a bug with the autocomplete, as a workaround you can try this似乎自动完成有一个错误,作为一种解决方法,您可以试试这个
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.