Как отобразить label, но отправить value в HTML5 <datalist>

Быстрый ответ

Чтобы пользователь видел пользовательские подписи, а на сервер отправлялись реальные значения, воспользуйтесь атрибутами label и value. Атрибут label отвечает за отображение текста, а value — за значения, которые пересылаются на сервер. Данные атрибуты нужно указывать в элементах <option>, располагаемых внутри <datalist>. В пользовательском интерфейсе будет видно значение label, а при отправке формы будет передаваться значение value.

<input list="items" name="item">
<datalist id="items">
  <option value="12345" label="Виджет A"></option>
  <option value="67890" label="Виджет B"></option>
</datalist>

Таким образом, при выборе "Виджет A" или "Виджет B" на сервер отправляются значения "12345" или "67890" соответственно.

Детальное разъяснение

Использование JavaScript для присвоения значений

Если вы хотите преобразовать выбранное пользователем значение в реальное перед отправкой на сервер, то вам поможет JavaScript. Он позволит обновить значение скрытого поля так, чтобы оно соответствовало атрибуту data-value выбранного элемента.

<input list="items" id="inputField" name="itemLabel" oninput="getValue()"> 
<input type="hidden" id="hiddenField" name="item">
<datalist id="items">
  <option value="Виджет A" data-value="12345"></option>
  <option value="Виджет B" data-value="67890"></option>
</datalist>

И добавим немного JavaScript:

function getValue() {
    var input = document.getElementById('inputField');
    var hiddenInput = document.getElementById('hiddenField');
    
    var chosenValue = input.value;
    var optionsList = document.getElementById('items').childNodes;
    
    for(var i = 0; i < optionsList.length; i++) {
        if(optionsList[i].value === chosenValue) {
            hiddenInput.value = optionsList[i].getAttribute('data-value');
            break;
        }
    }
}

Выбор языка программирования: JavaScript или jQuery

Такие задачи можно решить и с помощью чистого JavaScript, и с помощью jQuery. Вот пример на jQuery:

$('#inputField').on('input', function() {
    var chosenValue = $(this).val();
    var hiddenValue = $('#items option').filter(function() {
        return this.value === chosenValue;
    }).data('value');
    $('#hiddenField').val(hiddenValue || chosenValue);
});

Селекторы jQuery быстро находят значения опций, а метод .data() используется для доступа к данным атрибутам.

Неуникальные подписи: Что делать?

Если подписи уникальными сделать не получается, но вам всё же нужно отправить правильное значение, JavaScript сможет выполнить это, корректно связав пользовательский ввод с элементами в <datalist>.

Визуализация

Следует наглядно продемонстрировать изученный материал:

Вы видите 🍔 (Бургер), а сервер получает "burger001".

Универсальный опыт

Готовность к разным браузерам

Не забывайте проверять своё решение в различных браузерах: дружественном Chrome, непредсказуемом Firefox, лояльном Opera или капризном Internet Explorer.

Альтернативы для неполной поддержки datalist

Если браузер не поддерживает <datalist> в полном объёме, можно использовать <select> с возможностью поиска как запасной вариант:

<select id="itemsFallback" name="item">
  <option value="12345">Виджет A</option>
  <option value="67890">Виджет B</option>
</select>

Советы для начинающих

Повышение интерактивности

Для улучшения удобства пользователя устанавливайте отображение списка выбора при фокусировке на поле ввода:

document.getElementById('inputField').addEventListener('focus', (event) => {
    event.target.setAttribute('list', 'items');
});

Полезные материалы

1. HTML datalist Tag — документация и примеры использования тега <datalist>.
2. FormData – Web APIs | MDN — работа с данными формы на JavaScript.
3. Constraint validation – HTML: HyperText Markup Language | MDN — внедрение проверки данных формы в HTML5.
4. HTML Input Types — обзор типов ввода в HTML.
5. Using data attributes – Learn web development | MDN — использование данных атрибутов в HTML.
6. JavaScript Events — управление событиями на JavaScript.