Tunjukkan label datalist tetapi kirimkan nilai sebenarnya

Saat ini <datalist>elemen HTML5 didukung di sebagian besar browser utama (kecuali Safari) dan sepertinya cara yang menarik untuk menambahkan saran ke masukan.

Namun, tampaknya ada beberapa perbedaan antara implementasi valueatribut dan teks bagian dalam pada <option>. Sebagai contoh:

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

Ini ditangani secara berbeda oleh browser yang berbeda:

Chrome dan Opera:

FireFox dan IE 11:

Setelah memilih satu, masukan diisi dengan nilai dan bukan teks bagian dalam. Saya hanya ingin pengguna melihat teks ("Jawaban") di dropdown dan di input, tetapi meneruskan nilai 42saat mengirimkan, seperti keinginan select.

Bagaimana saya bisa membuat semua browser memiliki daftar dropdown yang menunjukkan label (teks bagian dalam) <option>s, tetapi mengirimkan valueatribut saat formulir dikirimkan?

Perhatikan bahwa datalisttidak sama dengan a select. Ini memungkinkan pengguna memasukkan nilai khusus yang tidak ada dalam daftar, dan tidak mungkin mengambil nilai alternatif untuk masukan seperti itu tanpa menentukannya terlebih dahulu.

Cara yang mungkin untuk menangani masukan pengguna adalah dengan mengirimkan nilai yang dimasukkan sebagaimana adanya, mengirimkan nilai kosong, atau mencegah pengiriman. Jawaban ini hanya menangani dua opsi pertama.

Jika Anda ingin melarang masukan pengguna sepenuhnya, mungkin selectakan menjadi pilihan yang lebih baik.

Untuk hanya menampilkan nilai teks dari optiondalam dropdown, kami menggunakan teks bagian dalam untuk itu dan meninggalkan valueatributnya. Nilai sebenarnya yang ingin kami kirimkan disimpan dalam data-valueatribut khusus :

Untuk mengirimkan ini data-valuekita harus menggunakan file <input type="hidden">. Dalam hal ini kita membiarkan name="answer"input reguler dan memindahkannya ke salinan tersembunyi.

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

Dengan cara ini, ketika teks dalam masukan asli berubah, kita dapat menggunakan javascript untuk memeriksa apakah teks juga ada di datalistdan mengambilnya data-value. Nilai itu dimasukkan ke dalam input tersembunyi dan dikirimkan.

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

Id answerdan answer-hiddenpada input reguler dan tersembunyi diperlukan agar skrip mengetahui input mana yang termasuk dalam versi tersembunyi mana. Dengan cara ini dimungkinkan untuk memiliki beberapa inputs pada halaman yang sama dengan satu atau lebih datalists memberikan saran.

Setiap masukan pengguna dikirimkan apa adanya. Untuk mengirimkan nilai kosong saat input pengguna tidak ada di datalist, ubah hiddenInput.value = inputValuekehiddenInput.value = ""

Contoh jsFiddle yang berfungsi: javascript dan jQuery biasa

Solusi yang saya gunakan adalah sebagai berikut:

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

Kemudian akses nilai yang akan dikirim ke server menggunakan JavaScript seperti ini:

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

Semoga membantu.

Saya menyadari ini mungkin agak terlambat, tetapi saya menemukan ini dan bertanya-tanya bagaimana menangani situasi dengan beberapa nilai yang identik, tetapi kunci yang berbeda (sesuai komentar bigbearzhu).

Jadi saya sedikit mengubah jawaban Stephan Muller:

Seorang datalist dengan nilai non-unik:

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

Ketika pengguna memilih opsi, menggantikan browser yang input.valuedengan valuesatu datalistpilihan bukan innerText.

Kode berikut kemudian memeriksa optiondengan itu value, mendorongnya ke bidang tersembunyi dan menggantikan input.valuedengan 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;
      }

});

Akibatnya, pengguna melihat apa pun yang innerTextdikatakan opsi tersebut , tetapi ID unik dari option.valuetersedia saat pengiriman formulir. Demo jsFiddle

Saat mengklik tombol pencarian, Anda dapat menemukannya tanpa loop.
Cukup tambahkan ke opsi atribut dengan nilai yang Anda butuhkan (suka id) dan cari secara spesifik.

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

Menggunakan PHP saya telah menemukan cara yang cukup sederhana untuk melakukan ini. Teman-teman, Gunakan saja sesuatu seperti ini

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

Kode Di Atas memungkinkan formulir membawa id dari opsi yang juga dipilih.