Angular - 自定义 ngx-bootstrap Typeahead 以根据以逗号分隔的多个值自动完成

Question

我有一个预先输入自动完成输入框。我的要求是如果列表与以逗号输入的字符串列表匹配，则显示列表。

例如:

如果我的列表是:

[{
        deviceId: '1111111',
        name: 'Crafty'
    },
    {
        deviceId: '000000',
        name: 'TeleCom'
    },
    {
        deviceId: '1110009999',
        name: 'TeleCom'
    }
    {
        deviceId: '999999',
        name: 'Mobile'
    }
 ]

如果我在搜索框中输入“111, 999”，自动完成列表应显示 3 项(包含 111、999 或两者)。

我目前尝试使用 [typeaheadSingleWords]=true 和 typeaheadWordDelimiters=","。但这只会返回“1110009999”。

我当前的输入框是:

 <input type="text" class="form-control" 
   [(ngModel)]="autoCompleteModel" 
   [typeahead]="autoCompleteList" 
   [typeaheadItemTemplate]="filterConfig.itemTemplate"
   typeaheadOptionField="label" 
   [typeaheadWaitMs]="200" 
   [typeaheadScrollable]="true" 
   [typeaheadOptionsInScrollableView]="5" 
   [typeaheadSingleWords]=true 
   typeaheadWordDelimiters=","                         
   (typeaheadOnSelect)="onSelectAutoComplete($event)" 
   placeholder="{{filterConfig?.autoComplete?.placeholder || 'Search'}}" 
   *ngIf="showSelect" autofocus>

有没有办法使用 ngx-bootstrap>typeahead 插件来实现这一点？请问各位大佬有没有其他支持这个功能的插件？任何帮助将不胜感激。

Answer 1

有点晚了，但我目前正在使用 typeahead，我发现了这个:

  <input
    [formControl]="optionValue"
    typeaheadGroupField="type"
    [typeahead]="allOptions"
    [typeaheadItemTemplate]="myCustomItemTemplate"
    [optionsListTemplate]="myCustomListTemplate"
    placeholder=""
  />

  <ng-template #myCustomListTemplate let-matches="matches" let-itemTemplate="itemTemplate" let-query="query">
    <ng-template ngFor let-match let-i="index" [ngForOf]="matches">
      <ng-template
        [ngTemplateOutlet]="itemTemplate"
        [ngTemplateOutletContext]="{ item: match.item, index: i, match: match, query: query }"
      ></ng-template>
    </ng-template>
  </ng-template>

  <ng-template #myCustomItemTemplate let-model="item" let-index="index">
    <span> Model {{ index }}: {{ model | json }} </span>
  </ng-template>

这将允许您自定义列表和元素，以便您可以根据需要显示它。