单击按钮上的事件时打开NgbTypeahead下拉列表

Question

我需要在输入上模拟焦点事件来打开NgbTypeahead下拉列表，这可能吗？因为我不能这样做：

.ts:

@ViewChild('inputExecutor') inputExecutor: ElementRef
focus$ = new Subject<string>();
click$ = new Subject<string>();
focused(){
this.executorForm.controls['executor'].setValue('');
this.focus$.next(this.executorForm.value.executor);
}
inputFocus(){
this.inputExecutor.nativeElement.focus();
}

html:
<input
class="choose-executor-input"
type="text"
name="executor"
formControlName="executor"
[ngbTypeahead]="searchExecutors"
(focus)="focus$.next($event.target.value); focused()"
(click)="click$.next($event.target.value);"
(selectItem)="itemSelected($event)"
[resultFormatter]="formatExecutors"
[inputFormatter]="formatExecutors"
#instance="ngbTypeahead"
#inputExecutor/>
<button 
click)="inputFocus()"
class="btn btn-executor-open"></button>
</button>

那么，我该如何专注于打开下拉列表的输入呢？有什么问题吗？

Answer 1

要实现这一点，您可以在NgbTypeahead绑定到的输入元素上激发一个输入事件，然后调用焦点方法，使输入具有焦点，并可以立即开始键入。

我从ng引导程序网站上的焦点开放演示开始，并进行了以下更改：

声明一个新的模板变量elem，这样DOM元素就可以在组件TS文件中访问(注意，不能使用现有的instance，因为它是NgbTypeahead，而不是HTML元素(：

组件HTML:

<input
id="typeahead-focus"
...
#instance="ngbTypeahead"
#elem
/>

组件TS:

@ViewChild('elem') elem: ElementRef;

在模板中添加一个按钮，该按钮将调用焦点函数-单击该按钮将打开预编并聚焦于它：

<button (click)="openTypeahead()">Open Typeahead</button>

在组件TS文件中添加openTypeahead函数，如下所示：

public openTypeahead(): void {
// Dispatch event on input element that NgbTypeahead is bound to
this.elem.nativeElement.dispatchEvent(new Event('input'));
// Ensure input has focus so the user can start typing
this.elem.nativeElement.focus();
}

请参阅此Stacklitz演示

Answer 2

我使用

HTML:

<input #instance="ngbTypeahead" .../>
<button (click)="openTypeahead(instance)">Open Typeahead</button>

TS:

openTypeahead(inp) {
inp._elementRef.nativeElement.value = '';
inp._elementRef.nativeElement.dispatchEvent(new Event('input'));
inp._elementRef.nativeElement.focus();
}