Angular - Customize ngx-bootstrap Typeahead to autocomplete based on multiple values separated by comma

Question

I have a typeahead autocomplete input box. My requirement is to show list if it matches a list of strings entered by comma.

For example:

If my list is :

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

If I type "111, 999" in the search box, the autocomplete list should show 3 items (those containing 111, 999 and both).

I currently tried to use [typeaheadSingleWords]=true and typeaheadWordDelimiters=",". But this will return only '1110009999'.

My current typeahead box is :

 <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>

Is there any way to achieve this using ngx-bootstrap>typeahead plugin? Anyone, please suggest if there are any other plugins supporting this feature? Any help would be appreciated.

score 2 · Answer 1 · answered Dec 03 '19 at 08:06

It's a little bit late but I am working currently with typeahead and I found this:

  <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>

This would let you to customize list and element so you can display it as you want.

Angular - Customize ngx-bootstrap Typeahead to autocomplete based on multiple values separated by comma

1 Answers1