ng bootstrap 4-提前打开焦点

rn16 发表于 Dev

rn16

我使用ng-bootstrap 4（测试版8）。目前，我有这个：

<ng-template #rt let-r="result" let-t="term">
    {{ r.label }}
</ng-template>

<input
        id="typeahead-focus"
        class="form-control"
        [(ngModel)]="model"
        [ngbTypeahead]="search"
        [inputFormatter]="formatter"
        [resultTemplate]="rt"
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        #instance="ngbTypeahead"
/>

现在，如果用户单击输入元素，我想打开预输入。我怎样才能做到这一点？

this.search = (text$) =>
    text$
        .map(term => (term === '' ? this.items : this.items.filter(v => v.label.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

this.formatter = (x: {label: string}) => {
    console.log(x);
    return x.label;

丹尼尔·C。

以下解决方案适用于我：

将onFocus事件添加到您的输入搜索中

my.html文件

 <input 
    (focus)="onFocus($event)" 
    type="text" 
    (selectItem)="onItemSelected($event)" 
    [(ngModel)]="myModel" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt" 
    [inputFormatter]="formatter"/>

my.ts文件

  public onFocus(e: Event): void {
    e.stopPropagation();
    setTimeout(() => {
      const inputEvent: Event = new Event('input');
      e.target.dispatchEvent(inputEvent);
    }, 0);
  }

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => this.myList
          .filter(v => this.myfilter(term))
          .slice(0, 10));

还可以看看Typeahed：允许搜索焦点＃698

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。