How to display only the text in datalist HTML5 and not the value?

Question

Here is an example:

Answer 1

A quite messy method for doing this without dependencies like jQuery (edit: I realise that jQuery is being used by the OP, but this method will integrate fine with or without jQuery, so might helps others who are not).

First, swap your value and text nodes around, like so:

This ensures that the input always shows the correct value for the user. Then add in some JavaScript to check the text node of the corresponding value, like so:

let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () => {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});

You can also change the 'change' event listener to 'keyup' too, to get real-time feedback. And instead of console.log('The value is:', _value ) you can simply add in an additional hidden input to store the value, thus allowing you to send both the value and id.

This uses modern JavaScript notation, but to make it backward compatible just need to change the 'change', () => { call to 'change', function() { and change let to var.