Show datalist labels but submit the actual value

Detailed breakdown

Leveraging JavaScript for value assignment

Ever wondered how to take the user's selection and use it to get the real value, the one that's meant to be submitted? The answer is JavaScript. Simply update a hidden input field value to match the data-value of the selected option.

<input list="items" id="inputField" name="itemLabel" oninput="getValue()"> 
<input type="hidden" id="hiddenField" name="item">
<datalist id="items">
  <option value="Widget A" data-value="12345"></option>
  <option value="Widget B" data-value="67890"></option>
</datalist>


And some JavaScript magic:

function getValue() {
    // Gathering our brave input warriors...
    var input = document.getElementById('inputField');
    var hiddenInput = document.getElementById('hiddenField');
    
    // Let the quest for value begin!
    var val = input.value;
    var opts = document.getElementById('items').childNodes;
    
    // Seek in every nook and cranny for the right value
    for(var i = 0; i < opts.length; i++) {
        if(opts[i].value === val) {
            hiddenInput.value = opts[i].getAttribute('data-value');
            break;
        }
    }
    // "hiddenInput.value is my name, fetching data-value is my game!" 😎
}


Your programming language, your choice: JavaScript vs jQuery

Both plain JavaScript and jQuery can handle this job. Here's how:

$('#inputField').on('input', function() {
    // "I am the selected value. Reveal yourself!"
    var val = $(this).val();
    var hiddenVal = $('#items option').filter(function() {
        return this.value === val;
    }).data('value');
    // "Ah, there you are, hidden value. Let's get you submitted!"
    $('#hiddenField').val(hiddenVal || val);
});


Just imagine jQuery selectors as friendly elves fetching the option values in a flash. .data() method? Just a magic spell for handling data attributes.

Non-unique labels? Interesting challenge...

When labels are not unique, but you still want to submit the correct value, JavaScript can help! It'll parse and match the user input to the right entry within the <datalist>.

Universal experience

Finish-line in sight: Cross-browser support

Always remember to test your implementation in various browsers. Whether it's Chrome happily gobbling up your code or Firefox spitting out errors, or Opera singing praises of your solution, or Internet Explorer... well, being Internet Explorer.

Not all browsers are friends of datalist: The fallback plan

When browsers get picky and don't fully support <datalist>, have a graceful fallback in line. Using a <select> element with a search function can duplicate a datalist experience:

<select id="itemsFallback" name="item">
  <option value="12345">Widget A</option>
  <option value="67890">Widget B</option>
</select>


Pro tips for beginners

User interaction: Let's jazz up!

Improve user experience by triggering the list of values when the field gains focus:

document.getElementById('inputField').addEventListener('focus', (event) => {
    event.target.setAttribute('list', 'items');
    // "Hey user, click me! Look at all these beautiful options!" 😉 
});
