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

Question

В настоящее время HTML5 <datalist> Элемент поддерживается в большинстве основных браузеров (кроме 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>с, но отправьте value атрибут при отправке формы?

Answer 1

Обратите внимание, что 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.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на одной странице с одним или несколькими datalistс предложениями.

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

---

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

Answer 2

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

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

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

Answer 3

Я понимаю, что это может быть немного поздно, но я наткнулся на это и задумался, как обрабатывать ситуации с несколькими одинаковыми значениями, но разными ключами (согласно комментарию 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

Answer 4

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

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

Answer 5

Используя 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>

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

Answer 6

чтобы получить text() вместо val() попробуйте:

      $("#datalistid option[value='" + $('#inputid').val() + "']").text();

Answer 7

Это очень просто: попробуйте это:

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