javascript डाटलिस्ट लेबल दिखाएं लेकिन वास्तविक मान सबमिट करें




html html5 (4)

ध्यान दें कि datalist एक 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">

इस तरह, जब मूल इनपुट में पाठ बदलता है तो हम जावास्क्रिप्ट का उपयोग यह जांचने के लिए कर सकते हैं कि टेक्स्ट 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.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 एस होना संभव है जिसमें एक या अधिक datalist सुझाव प्रदान करते हैं।

किसी भी उपयोगकर्ता इनपुट के रूप में जमा किया गया है। जब hiddenInput.value = label इनपुट hiddenInput.value = label में मौजूद नहीं है तो खाली मान सबमिट करने के लिए, hiddenInput.value = label को hiddenInput.value = ""

काम कर रहे jsFiddle उदाहरण: सादा जावास्क्रिप्ट और jQuery

वर्तमान में HTML5 <datalist> तत्व अधिकांश प्रमुख ब्राउज़रों (सफारी को छोड़कर) में समर्थित है और इनपुट में सुझाव जोड़ने का एक दिलचस्प तरीका प्रतीत होता है।

हालांकि, value विशेषता के कार्यान्वयन और <option> पर आंतरिक पाठ के बीच कुछ विसंगतियां प्रतीत होती हैं। उदाहरण के लिए:

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

यह विभिन्न ब्राउज़रों द्वारा अलग-अलग संभाला जाता है:

क्रोम और ओपेरा:

फ़ायरफ़ॉक्स और आईई 11:

एक का चयन करने के बाद, इनपुट मूल्य से भरा है, न कि आंतरिक पाठ। मैं केवल उपयोगकर्ता को ड्रॉपडाउन में और इनपुट में टेक्स्ट ("उत्तर") देखना चाहता हूं, लेकिन सबमिट पर वैल्यू 42 पास करूँगा, जैसे एक select होगा।

मैं सभी ब्राउज़रों को ड्रॉपडाउन सूची को <option> एस के लेबल (आंतरिक पाठ) को कैसे दिखा सकता हूं, लेकिन फॉर्म सबमिट होने पर value विशेषता भेज सकता हूं?


मैं जिस समाधान का उपयोग करता हूं वह है

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

जावास्क्रिप्ट के माध्यम से सर्वर पर भेजा जाने वाला मान एक्सेस करें

var shownVal= document.getElementById("answer").value;
var value2send=document.querySelector("#answers option[value='"+shownVal+"']").dataset.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>

उपरोक्त कोड फ़ॉर्म को विकल्प के आईडी को भी चुनने देता है।


यह बहुत आसान है: इसे आजमाएं:

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




html-datalist