В настоящее время <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
атрибут?
источник
value=""
должен иметь приоритет над строкой в тегах, когда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, при этом один или несколькоdatalist
s предоставляют предложения.Любой пользовательский ввод предоставляется как есть. Чтобы отправить пустое значение, когда пользовательский ввод отсутствует в списке данных, измените
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;
Надеюсь, это поможет.
источник
input
элемент атрибутомdata-value="1"
. Затем я написал следующий блок там, где значение былоif (typeof $(this).attr('data-value') != 'undefined') { var id = $(this).attr('name'); val = $('#'+id).find('option[value="'+val+'"]').attr('data-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>
Код выше позволяет форме содержать идентификатор выбранной опции.
источник
customer_id_real
отправленное значение , а не выбранное значение.