提前输入：Select 模糊

Question

我正在使用 Angular bootstrap typeahead plugin 从列表中选择一个值。

但是，当我键入整个值并在外部单击时，它不起作用。

http://plnkr.co/edit/WjHkhPJVZXMMF79apiIF?p=preview

<ng-template #rt let-r="result" let-t="term">
  <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" width="16">
  {{ r.name}}
</ng-template>

<label for="typeahead-template">Search for a state:</label>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
  [inputFormatter]="formatter" />
<hr>
<pre>Model: {{ model | json }}</pre>

打字稿

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {debounceTime, map} from 'rxjs/operators';

interface IStateData {
        name: string;
        flag: string;
    }

const statesWithFlags: {name: string, flag: string}[] = [
  {'name': 'Alabama', 'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},
  {'name': 'Alaska', 'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},
  {'name': 'Arizona', 'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'}

];

@Component({
  selector: 'ngbd-typeahead-template',
  templateUrl: 'src/typeahead-template.html',
  styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadTemplate {
  public model: IStateData = {};

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      map(term => term === '' ? []
        : statesWithFlags.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );

  formatter = (x: {name: string}) => x.name;

}

当我 select 列表中的项目或使用 Tab 键时，它工作正常。它正确设置了模型值。

问题： 当我键入整个城市或粘贴值并在外部单击时，它不起作用。当我在前面的类型上模糊时，它基本上没有设置项目

模型对象设置不正确，它在这里转换为字符串。

注意： 我需要类似于 Ngx 中的这个 bootstrap。 https://valor-software.com/ngx-bootstrap/#/typeahead#on-blur 但是他们还有其他未解决的问题 failed to initialize the data.

Answer 1

为您的输入添加模糊事件

<input id="typeahead-template" type="text" class="form-control" 
  [(ngModel)]="model"  
  [ngbTypeahead]="search" 
  [resultTemplate]="rt"
  [inputFormatter]="formatter" 
  (blur)="onBlur(model)" />

然后在你的ts文件中定义这个方法

onBlur(search) {
  statesWithFlags.forEach(data => {
    if (search.toLowerCase() === data.name.toLowerCase()) {
      this.model = data;
    }
  })
}

检查这个工作示例

http://plnkr.co/edit/V29qxa?p=preview

提前输入：Select 模糊

Typeahead: Select on blur

ng-bootstrap

angular