Angular 10 : Is there any way to get the selected DataList object

Question

Was creating an Input field with DataList. I was trying to get the object associated with selected option. I was able to get the selected value but not the whole object. I saw some earlier posts where the Datalist items are Unique. In such case we can filter the result based on the selected item & we have only one object corresponding to the selected value.

In my case the DataList items are not unique.

public userDetails: Array = [ {userID: 1, userName: 'user 1'}, {userID: 2, userName: 'user 2'}, {userID: 11, userName: 'user 1'}]

Here the items that we are displaying is userName and it's not unique. I need to get the userID corresponding to selected item.

<input type="text" class="form-control" list="datalist1"/>
<datalist id="datalist1">
     <option *ngFor="let user of userDetails" [value]="user.displayName" (click)="selected(user)">
         {{ user.displayName }}
     </option>
</datalist>

Answer 1

You can do something like this :

<input type="text" class="form-control" list="datalist1" [(ngModel)]='currentUser' (change)="selected(currentUser)"/>
<datalist id="datalist1">
     <option *ngFor="let user of userDetails" [value]="user.displayName">
         {{ user.displayName }}
     </option>
</datalist>

and then in component.ts :

selected(item){
    console.log('selected items : ',item)
    this.selctedUser = this.userDetails.filter((user)=>user.displayName.includes(item))

  }

ofcourse you'll have to update the field using which you want to find the users. here is a sample demo : demo