0

I'm using a datalist to create a list for a user to select a customer. When viewing the datalist in Chrome, the customer ID is visible along with the customer name. Ideally, the user should only be able to see the customer name, not the ID. 

<input list="s" name="s">
             <datalist id="s">
             <option value="customer.id">customer.name</option>

In Chrome, the above method displays both the ID and the Name. How do I hide the value attribute from the user so they can only see the name? This happens by default in Firefox so my guess is this is a polyfill issue, but I have not been able to find a solution. Both customer.id and customer.name are being pulled in from the client's server, so sadly data-value would not be a suitable solution in this case.

Jimmy Carrigan
  • 25
  • 4
  • "When viewing the datalist in Chrome, the customer ID is visible along with the customer name" what do you mean by "visible"? on source code? can you create example on snippet etc? – A. Meshu May 04 '20 at 21:49
  • I've created a fiddle here: https://jsfiddle.net/kangmingjie/wbmLe9u8/ What I mean by visible is that what I listed in the **value** attribute is displayed along with what I have in between my option tags. In other words, I only want "example1" to show up, not "attribute1". – Jimmy Carrigan May 04 '20 at 22:07
  • You can use `name` attribute to solve that. Check this: https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value – A. Meshu May 04 '20 at 22:27

0 Answers0