Currently, I'm experimenting with implementing TYPEHEAD for user input using the ng-bootstrap library. The goal is to display a list of objects (similar to a select option without a dropdown box):
HTML
<input type="search"
#instance="ngbTypeahead"
placeholder="Search"
aria-label="Search"
[(ngModel)]="model"
[ngbTypeahead]="search"
[resultTemplate]="rt"
[inputFormatter]="formatter"
(focus)="focus$.next($event.target.value)"
(click)="click$.next($event.target.value)"
>
As I type the name of an object, I am currently receiving 'empty value' displayed seven times (representing all the desired objects) until I actually select one, in which case the selected value appears correctly in the input field (though not in the select box).
TS
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
merge(this.focus$),
merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
map(term => (term === '' ? this.productList
: this.productList.filter(v => v.name_product.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
);
formatter = (x: {name_product: string}) => x.name_product;
searchUrl(url){
if(url){
window.open(url,'_blank');
}
}
JSON
productList =
[
{
id_product:1,
name_product: 'Laptop Dell'
},
{
id_product:2,
name_product: 'Laptop HP'
},
{
id_product:3,
name_product: 'G-Shock Casio'
},
{
id_product:4,
name_product: 'Casio LR-T CALC'
},
{
id_product:5,
name_product: 'LG G3 Stylus'
},
{
id_product:6,
name_product: 'DYMO 450 Turbo'
},
{
id_product:7,
name_product: 'Brother QL 700'
}
];
My objective is to display product names (name_product), while still obtaining the corresponding ID (id_product) into my [(ngModel)]="model". How can I resolve this issue?"
Check out my stackblitz here to further understand this bug.