Setting Hidden Datalist Option Values

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 hidden, and we're st

Solution 1:

You can use data-value and jquery to make your value hidden.

e.g:

$(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="selected"list="browsers"name="browser"><datalistid="browsers"><optiondata-value="1"value="InternetExplorer"></option><optiondata-value="2"value="Firefox"></option><optiondata-value="3"value="Chrome"></option></datalist><inputid="submit"type="submit">

jsfiddle

Thanks to @guest271314

Solution 2:

There is no native way. For text inputs

The input element represents a one line plain text edit control for the element's value.

So it's not possible to make a text input display some text different than its value.

You could hijack the value getter in HTMLInputElement.prototype, but I don't recommend it, and I don't see any way to know which option was chosen if the values are not unique.

const des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', {
  get: function() {
    const value = des.get.call(this);
  
    if (this.type === 'text' && this.list) {
      const opt = [].find.call(this.list.options, o => o.value === value);
      return opt ? opt.dataset.value : value;
    }

    return value;  
  } 
});

<inputlist="options"oninput="console.log(this.value);" /><datalistid="options"><optiondata-value="1">Foo</option><optiondata-value="2">Bar</option><optiondata-value="3">Foo</option></datalist>

Or maybe you can let the input show the value of the option instead of the text, but replace it immediately:

document.querySelector('input').addEventListener('input', event => {
  const value = event.target.value;
  const opt = [].find.call(event.target.list.options, o => o.value === value);

  if (opt) {
    event.target.value = opt.textContent;
  }
});

<inputlist="options"oninput="console.log(this.value);" /><datalistid="options"><optionvalue="1">Foo</option><optionvalue="2">Bar</option><optionvalue="3">Foo</option></datalist>

In the second example, oninput="console.log(this.value)" shows the value of the option because that code runs before replacing the value to the text content. If you want later .value accessions to return the option value, you will need to hijack the value getter like in the first example.

Solution 3:

The correct syntax of datalist is like bellow. Also there is no point to have two options with the same name. I took the JavaScript out of the HTML as it should be. ID attribute of the individual options can be replaced with other attribute.

$(function() {
  $('input[name=chooseOption]').on('input',function() {
    var selectedOption = $('option[value="'+$(this).val()+'"]');
    console.log(selectedOption.length ? selectedOption.attr('id') : 'This opiton is not in the list!');
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><inputlist="options"name="chooseOption"><datalistid="options"><optionid="1"value="Foo"><optionid="2"value="Bar"><optionid="3"value="Foo"></datalist>

Solution 4:

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 <option data-value="439" value="Readable Text"></option>

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.