My boss is insisting that I use a datalist in our website interface to select an employee, even though there's no way to determine if the user typed in the name or picked from the list. The challenge is that the list must only display full names, but when the form is submitted, I need the employee ID, not just their name. Using the name to find the ID could cause issues if there are multiple employees with the same name. While it may be unlikely to happen, my boss wants me to address this issue. Unfortunately, I'm limited to using a datalist and cannot consider any other options. Here's the code:
<input list="empl-list" type="text">
<datalist id="empl-list">
<option *ngFor="let empl of employees" value="{{empl.name + ' ' + empl.surname}}">
</datalist>
I thought about adding a function to the option click event in the datalist to retrieve the employee's ID, but it seems that datalists don't have a click event. One potential solution could be to append a counter to duplicate surnames (e.g., "Jim William", "Jim William 2"...), but I'm unsure if my boss would approve this approach. I'd prefer to explore alternative solutions if possible. Any suggestions?