Setting hidden datalist option values

Question

In the snippet below, I have two methods to choose an item: input with datalist and traditional select with options.

The select element keeps the option values hidde

Answer 1

So for the codebase I'm working on, I have a programatic fieldWriter for writing dynamic forms. I was asked to turn a bunch of selects into autocomplete datalists. What I did for this is set up 3 elements.

• One datalist with the name "somefield_dl"
• One visible input with the name "somefield_proxy"
• One hidden input with the name "somefield"

On the datalists, I set each option like

With event handlers, anytime the "somefield_proxy" changes, the "somefield" is changed to the data-value of the option from "somefield_dl" with a matching value.

Code-wise, for using these, the main difference is that every time you update the field's value, you have to trigger the click event on the hidden input to update the proxy input. Also, when gathering data, you have to exclude the elements whose name ends with _proxy.