Veri listesi etiketlerini göster ancak gerçek değeri gönderin

Şu anda HTML5 <datalist>öğesi çoğu büyük tarayıcıda (Safari dışında) desteklenmektedir ve bir girdiye öneriler eklemenin ilginç bir yolu gibi görünmektedir.

Bununla birlikte, valueözniteliğin uygulanması ile iç metin arasında bazı tutarsızlıklar var gibi görünmektedir <option>. Örneğin:

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

Bu, farklı tarayıcılar tarafından farklı şekilde ele alınır:

Chrome ve Opera:

FireFox ve IE 11:

Birini seçtikten sonra, girdi iç metinle değil değerle doldurulur. Kullanıcının yalnızca açılır menüde ve girişte metni ("Cevap") görmesini, ancak değeri 42göndermede olduğu gibi iletmesini istiyorum select.

Tüm tarayıcıların açılır listenin e-postaların etiketlerini (iç metin) göstermesini <option>, ancak valueform gönderildiğinde özniteliği göndermesini nasıl sağlayabilirim ?

A datalistile aynı şey olmadığını unutmayın select. Kullanıcıların listede olmayan özel bir değer girmelerine olanak tanır ve bu tür bir giriş için önce onu tanımlamadan alternatif bir değer getirmek imkansız olacaktır.

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

Kullanıcı girişine tamamen izin vermemek istiyorsanız, belki selectdaha iyi bir seçim olabilir.

optionAçılır listedeki yalnızca metin değerini göstermek için , bunun için iç metni kullanırız ve valueniteliği dışarıda bırakırız . Göndermek istediğimiz gerçek değer, özel bir data-valueöznitelikte saklanır :

Bunu göndermek data-valueiçin bir <input type="hidden">. Bu durumda name="answer", normal girdiyi dışarıda bırakır ve onu gizli kopyaya taşırız.

<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, orijinal girdideki metin değiştiğinde, metnin de içinde bulunup bulunmadığını kontrol etmek için javascript kullanabiliriz datalistve data-value. 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.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;
        }
    }
});

Komut dosyasının hangi girdinin hangi gizli sürüme ait olduğunu bilmesi için id answerve answer-hiddennormal ve gizli girdiye ihtiyaç vardır. Bu şekilde input, bir veya daha fazla datalistöneriyle aynı sayfada birden çok URL'ye sahip olmak mümkündür .

Herhangi bir kullanıcı girişi olduğu gibi gönderilir. Kullanıcı girişi veri listesinde bulunmadığında boş bir değer göndermek için şu şekilde değiştirin hiddenInput.value = inputValue:hiddenInput.value = ""

Çalışma jsFiddle örnekleri: düz javascript ve jQuery

Kullandığım çözüm şudur:

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

Ardından, şu şekilde JavaScript kullanarak sunucuya gönderilecek değere erişin:

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

Umarım yardımcı olur.

Bunun biraz geç olabileceğinin farkındayım, ama buna tökezledim ve birden çok özdeş değer, ancak farklı anahtarlar (bigbearzhu'nun yorumuna göre) olan durumları nasıl ele alacağımı merak ediyordum.

Bu yüzden Stephan Muller'in cevabını biraz değiştirdim:

Benzersiz olmayan değerlere sahip bir veri uzmanı:

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

Kullanıcı bir seçenek, tarayıcı cümledeki seçtiğinde input.valueile valuearasında datalistyerine seçeneği innerText.

Aşağıdaki kod daha sonra optionbununla bir olup olmadığını denetler value, bunu gizli alana iter input.valueve 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;
      }

});

Sonuç olarak, kullanıcı seçeneğin innerTextsöylediği şeyi görür , ancak option.valueformun gönderilmesiyle birlikte gelen benzersiz kimliği kullanılabilir. Demo jsFiddle

Arama için butona tıkladığınızda, onu döngü olmadan bulabilirsiniz.
Sadece seçeneğe ihtiyacınız olan değere sahip bir özellik ekleyin (beğenmek id) ve özel olarak arayın.

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

PHP'yi kullanarak bunu yapmanın oldukça basit bir yolunu buldum. Beyler, sadece böyle bir şey kullanın

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

Yukarıdaki Kod, formun ayrıca seçilen seçeneğin kimliğini taşımasına izin verir.