Veri etiketlerini göster ama asıl değeri gönder

Question

Şu anda çoğu ana tarayıcıda (Safari hariç) HTML5 <datalist> öğesi destekleniyor ve bir girdiye öneri eklemek için ilginç bir yol gibi görünüyor. Bununla birlikte, value özniteliğinin uygulanmasıyla <option> iç metninin iç kısımları arasında bazı tutarsızlıklar var gibi görünmektedir. Örneğin:

Krom ve Opera:

FireFox ve IE 11:

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

Bu farklı farklı tarayıcılar tarafından ele alınır

birini seçtikten sonra Girdi, iç metinle değil, değerle doldurulur. Sadece kullanıcının açılır menüdeki ve girişteki metni ("Cevap") görmesini istiyorum, ancak select gibi bir 42 değerini gönderim sırasında ilet.

Tüm tarayıcılarda, açılan listenin <option> s etiketlerini (iç metin) göstermesini, ancak form gönderildiğinde value özniteliğini nasıl gönderebilirim?

Answer 1

datalist'un select ile aynı olmadığını unutmayın. Kullanıcıların listede olmayan bir özel değer girmelerine izin verir ve ilk önce bu tür girdiler için alternatif bir değer elde etmek imkansız olurdu.

Kullanıcı girdisini işlemenin olası yolları, girilen değeri olduğu gibi göndermek, boş bir değer göndermek veya göndermeyi engellemektir. Bu cevap sadece ilk iki seçeneği ele alır.

Kullanıcı girişini tamamen engellemek isterseniz, belki de select daha iyi bir seçim olacaktır.

---

açılır menüde option sadece metin değerini göstermek için, bunun için iç metin kullanmak ve value niteliğini dışarıda bırakın. Birlikte göndermek istediğimiz gerçek değer, bir data-value özniteliğinde saklanır:

Bu data-value'u göndermek için bir <input type="hidden"> kullanmamız gerekir. Bu durumda, normal girdideki name="answer"'u dışarıda bırakır ve gizli kopyaya taşırız. biz javascript kullanabilirsiniz orijinal giriş değişiklikleri metin datalist metin de mevcut olmadığını kontrol edip data-value getirmesi

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

Bu şekilde,. Bu değer gizli girdiye eklenir ve gönderilir.

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

---

düzenli ve gizli girişine kimliği answer ve answer-hidden hangi gizli versiyonunu ait olduğu giriş bilmek komut dosyası için gereklidir. Bu sayede aynı sayfada birden fazla input s olması önerileri veren bir veya daha fazla datalist s ile mümkündür.

Herhangi bir kullanıcı girişi olduğu gibi gönderilir. kullanıcı giriş datalist içinde mevcut değilken hiddenInput.value = label için hiddenInput.value = ""

---

Çalışma jsFiddle örnekleri değiştirmek, boş bir değer göndermek için: plain javascript ve jQuery

Answer 2

i kullanma çözelti

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

olduğu javascript yoluyla sunucuya gönderilecek değere erişim

umarım yardımcı olur