Показати мітки даталістів, але подати фактичне значення

В даний час <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це не те саме, що a 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звичайний та прихований ввід потрібні сценарію, щоб знати, який вхід належить до якої прихованої версії. Таким чином, можна мати декілька inputs на одній сторінці з одним або декількома 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>

Наведений вище код дозволяє формі містити ідентифікатор вибраної опції.