Ngx-bootstrap: Typeahead search behavior: Starts-With

[bogacg]

I can't see an option to make Thypeahead shows values only starting with entered letter/string.
Right now it searches with a 'contains' behavior. If there is no option to make searches in available collection with 'starts-with' behavior, I'd propose it as an enhancement.

Thanks

[bogacg]

For now I overcame this issue by implementing ngDoCheck() in my component. I have 2 arrays, one is visibleItemsList (items for typeahead) other is allAvailableItems (self explaining) and I check my typeahead bound model in ngDoCheck, when user starts typing, change event raised and I capture it to filter allAvailableItems by only taking ones that start with typed in string for changed property (key) of bound model.

Still I think it would be nice to put this as an option in Typeahead directive.

[valorkin]

I took this thing in development, just keep track I am closing this issue in favor of #1513

[karangarg45]

@valorkin Has this been developed?

[karangarg45]

@bogacg is there any other way of achieving this?
I need this feature badly

[bogacg]

@karangarg45 There is no easy way.
Gist of it is [If using ReactiveForms]

• You need 2 arrays, one is your full set of data, other one is for visible one when you type in typeahead.
• Then you assign in your template like so: [typeahead]="visibleArray"
• you subscribe to .valueChanges of typeahead form control in ngOnInit, after controls are defined.
• and that in terms filters array: .valueChanges.subscribe(value => this.filterArray(value));
• that means you need to have a custom filter function:

filterArray(term: string){
this.visibleArray = this.originalArray.filter(k => k.startsWith(term));
}

my case was a bit more complicated...but this must give you an idea

[karangarg45]

@bogacg thanks it worked perfectly fine for me.i had the same exact case where i was using reactive forms

[valorkin]

@bogacg hint to your sample, you can use | async pipe
this.visibleArray = .valueChanges.map(term => this.originalArray.filter(k => k.startsWith(term))
and
[typeahead]="visibleArray | async"

should work fine