Typeahead：选择模糊

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;

}

当我从列表中选择项目或使用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