Как отобразить только текст в HTML5 списка данных, а не значение?

Вот пример:

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
</datalist>

http://jsfiddle.net/j7ehtqjd/1/

Решение, которого я хочу достичь, заключается в том, что, когда я нажимаю на элемент ввода, значение будет отображаться не только в тексте (т.е. 1, 2, 3, 4, 5). Я должен использовать ответ JSON для моей реальной проблемы.

Опять же, должен отображаться только текст, а значение должно быть скрыто, как общий выпадающий список. Эта функция автозаполнения необходима, иначе я бы пошел с обычным выпадающим.

Ответ 1

Изменить, обновить

Следующий регент

Попробуйте (v3)

HTML

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

JS

$(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


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

jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

Ответ 2

Довольно грязный метод для выполнения этого без зависимостей, такой как jQuery (править: я понимаю, что jQuery используется OP, но этот метод будет хорошо интегрироваться с или без jQuery, поэтому может помочь другим, кто этого не делает).

Сначала поменяйте местами ваши значения и текстовые узлы, вот так:

<input list="browsers" name="browser" id="my_input">
  <datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
  </datalist>
  <input type="submit">

Это гарантирует, что ввод всегда показывает правильное значение для пользователя. Затем добавьте JavaScript, чтобы проверить текстовый узел на соответствующее значение, например:

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 );
});

Вы также можете изменить слушатель события 'change' на 'keyup', чтобы получить обратную связь в реальном времени. И вместо console.log('The value is:', _value ) вы можете просто добавить дополнительный hidden ввод для хранения значения, что позволит вам отправлять как значение, так и идентификатор.

Это использует современную нотацию JavaScript, но чтобы сделать ее обратно совместимой, нужно просто изменить 'change',() => { вызов 'change', function() { и change let to var.