Показывать ярлыки каталогов, но представить фактическое значение

В настоящее время элемент 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 на submit, как a select.

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

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

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

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

Ответ 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;

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

Ответ 3

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

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

Ответ 4

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

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