Показать метки списка данных, но предоставить фактическое значение

В настоящее время <datalist>элемент HTML5 поддерживается в большинстве основных браузеров (кроме Safari) и кажется интересным способом добавления предложений во входные данные.

Однако, похоже, есть некоторые расхождения между реализацией valueатрибута и внутренним текстом в <option>. Например:

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

В разных браузерах это обрабатывается по-разному:

Chrome и Opera:

FireFox и IE 11:

После выбора одного из них ввод заполняется значением, а не внутренним текстом. Я хочу, чтобы пользователь видел только текст («Ответ») в раскрывающемся списке и во вводе, но передавал значение 42при отправке, как если selectбы.

Как сделать так, чтобы во всех браузерах в раскрывающемся списке отображались метки (внутренний текст) <option>s, но при отправке формы отправлялся valueатрибут?

Обратите внимание, что datalistэто не то же самое, что select. Он позволяет пользователям вводить пользовательское значение, которого нет в списке, и было бы невозможно получить альтернативное значение для такого ввода, не определив его предварительно.

Возможные способы обработки пользовательского ввода: отправить введенное значение как есть, отправить пустое значение или запретить отправку. Этот ответ обрабатывает только первые два варианта.

Если вы хотите полностью запретить ввод данных пользователем, возможно, selectэто будет лучшим выбором.

Чтобы отобразить только текстовое значение optionв раскрывающемся списке, мы используем для него внутренний текст и опускаем valueатрибут. Фактическое значение, которое мы хотим отправить, хранится в настраиваемом data-valueатрибуте:

Чтобы отправить это, data-valueмы должны использовать <input type="hidden">. В этом случае мы не указываем name="answer"на обычном входе и перемещаем его в скрытую копию.

<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

Таким образом, когда текст в исходном вводе изменяется, мы можем использовать javascript, чтобы проверить, присутствует ли текст в datalistфайле, и получить его data-value. Это значение вставляется в скрытый ввод и отправляется.

document.querySelector('input[list]').addEventListener('input', function(e) {
    var input = e.target,
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
        inputValue = input.value;

    hiddenInput.value = inputValue;

    for(var i = 0; i < options.length; i++) {
        var option = options[i];

        if(option.innerText === inputValue) {
            hiddenInput.value = option.getAttribute('data-value');
            break;
        }
    }
});

Идентификатор answerи answer-hiddenна обычном и скрытом вводе необходимы для того, чтобы скрипт знал, какой ввод принадлежит какой скрытой версии. Таким образом, inputна одной странице может быть несколько s, при этом один или несколько datalists предоставляют предложения.

Любой пользовательский ввод предоставляется как есть. Чтобы отправить пустое значение, когда пользовательский ввод отсутствует в списке данных, измените hiddenInput.value = inputValueнаhiddenInput.value = ""

Рабочие примеры jsFiddle: простой javascript и jQuery

Я использую следующее решение:

<input list="answers" id="answer">
<datalist id="answers">
  <option data-value="42" value="The answer">
</datalist>

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

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;

Надеюсь, это поможет.

Я понимаю, что это может быть немного поздно, но я наткнулся на это и задумался, как обрабатывать ситуации с несколькими идентичными значениями, но разными ключами (согласно комментарию bigbearzhu).

Поэтому я немного изменил ответ Стефана Мюллера:

Список данных с неуникальными значениями:

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

Когда пользователь выбирает опцию, браузер заменяет input.valueс valueиз datalistварианта вместо того , чтобы innerText.

Следующий код проверяет наличие optionс тем value, что выталкивает в скрытое поле и заменяет input.valueс innerText.

document.querySelector('#answerInput').addEventListener('input', function(e) {
    var input = e.target,   
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden');

    if (options.length > 0) {
      hiddenInput.value = input.value;
      input.value = options[0].innerText;
      }

});

Как следствие, пользователь видит все, что указано в параметре innerText, но уникальный идентификатор option.valueдоступен при отправке формы. Демо jsFiddle

При нажатии на кнопку поиска вы можете найти его без петли.
Просто добавьте к опции атрибут с нужным вам значением (например, id) и найдите его.

$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+ 
$('#autocomplete_input').val() +'"]').data('value'));
})

Используя PHP, я нашел довольно простой способ сделать это. Ребята, просто используйте что-нибудь вроде этого

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

Код выше позволяет форме содержать идентификатор выбранной опции.