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

Question

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

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

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

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

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

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

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

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

Comments

मुझे लगता है कि फ़ायरफ़ॉक्स और IE11 यहाँ गलत हैं; एक और दो के चश्मे के अनुसार , ऐसा लगता है कि value=""जब भी कोई value=""घोषित होता है, तो टैग के भीतर एक स्ट्रिंग पर वरीयता लेनी चाहिए । तो सुझाव यह होगा कि आप अपने मूल्य विशेषता को "उत्तर" दें।

— 21

@ टाइलेर नं - फ़ायरफ़ॉक्स और IE11 यहाँ सही हैं: लेबल विशेषता तत्व के लिए एक लेबल प्रदान करता है। एक विकल्प तत्व का लेबल लेबल सामग्री विशेषता का मूल्य है, अगर एक है, या, यदि नहीं है, तो तत्व के पाठ आईडीएल विशेषता का मूल्य है। w3.org/TR/html5/forms.html#attr-option-label

— easwee

@easwee जो कहता है कि लेबल होना चाहिए अगर लेबल है तो लेबल में क्या होना चाहिए, और यह होना चाहिए कि यदि मूल्य है तो मूल्य में क्या होना चाहिए। यह निर्दिष्ट नहीं करता है कि कौन सा पूर्वता लेता है।

— टायलरएच

Answer 1

ध्यान दें कि datalistएक के रूप में ही नहीं है 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">

इस तरह, जब मूल इनपुट में पाठ बदलता है, तो हम यह जांचने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं कि क्या पाठ भी इसमें मौजूद है 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नियमित और छिपे हुए इनपुट की आवश्यकता होती है कि कौन सा इनपुट किस छिपे हुए संस्करण से संबंधित है। इस तरह inputसे एक या अधिक datalistसुझाव देने वाले एक ही पृष्ठ पर कई एस होना संभव है ।

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

---

कार्यशील jsFiddle उदाहरण: सादे जावास्क्रिप्ट और jQuery

Comments

आप एक ही इनटेक्स्ट लेकिन अलग-अलग डेटा-वैल्यू वाले विकल्पों से कैसे निपटेंगे? उदा। jsfiddle.net/7k3sovht/78

— bigbearzhu

जहां तक ​​मैं बता सकता हूं, दोनों विकल्पों में अंतर करने का कोई तरीका नहीं है। क्योंकि यह सुनने के लिए कोई उपयोगकर्ता घटना नहीं है कि यह जानना असंभव है कि दोनों में से कौन सा वास्तव में चयनित है; हम सभी जानते हैं कि इनपुट क्षेत्र में क्या मूल्य समाप्त हुआ है।

— स्टीफन मुलर

@StephanMuller मेरे जैसे और भी HTML5 सीख रहे लोगों के लिए बहुत अच्छा जवाब, धन्यवाद! सबमिट करने के बाद आप डेमो के लिए टेक्स्टबॉक्स कैसे साफ करेंगे?

— क्रिस

शुद्ध jquery document.querySelector ('input [list]')। AddEventListener ('input', function (e) {var value = $ (this) .val; var list = $ (this) .attr ('list') ); var id = $ (यह) .attr ('id'); $ ('#' + सूची + 'विकल्प')। प्रत्येक (फ़ंक्शन () {if ($ (यह) .val () = मान) { $ ('#' + आईडी + '- छिपा हुआ); वैल ($ (यह) .attr (' डेटा-वैल्यू '));}});});

— पायोत्र कज़ुś

साझा करने के लिए @StephanMuller धन्यवाद, बहुत उपयोगी, मैं आपको कोडित के रूप में चला रहा हूं, हालांकि मुझे इनपुट में बैकस्पेस का उपयोग करते समय डेटा-मूल्य मिलता है, न कि सबमिट करते समय या यहां तक ​​कि एक अलग आइटम का चयन करते समय, क्या गलत हो सकता है?

— डिजाइ

Answer 2

मेरे द्वारा उपयोग किया जाने वाला समाधान निम्नलिखित है:

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

आशा करता हूँ की ये काम करेगा।

Comments

मैं किसी भी कारण से अपरिभाषित हो रहा हूं?

— देजेल

प्रत्येक चरण में कंसोल.लॉग के साथ परेशानी शूट करें। सुनिश्चित करें कि आप उसी आईडी मान का उपयोग कर रहे हैं जिसे आप कॉल कर रहे हैं। और अर्धविराम भी जांचें।

— हिजबुल्लाह शाह

यह समाधान इस तरह के एक महान विचार है! - मैं बस मिनटों में इस समाधान को लागू करने में सक्षम था। पहले मैंने अपने inputतत्व को विशेषता के साथ अद्यतन किया data-value="1"। तब मैंने निम्नलिखित ब्लॉक को उन स्थानों पर लिखा था जहाँ मूल्य को पकड़ा जा रहा था और इस्तेमाल किया जा रहा था:if (typeof $(this).attr('data-value') != 'undefined') { var id = $(this).attr('name'); val = $('#'+id).find('option[value="'+val+'"]').attr('data-value'); }

— WEBjuju

लेकिन अगर आपके पास दो अलग-अलग डेटा-वैल्यू के साथ दो कैप्शन हैं

— रिचर्ड एगुइरे

धन्यवाद हिजबुल्लाह शाह आपने वास्तव में इतने घंटे बचाए

— ABODE

Answer 3

मुझे पता है कि यह थोड़ा देर हो सकता है, लेकिन मैं इस पर ठोकर खाई और सोच रहा था कि कई समान मूल्यों के साथ स्थितियों को कैसे संभालना है, लेकिन अलग-अलग कुंजी (बिगबियरज़ू की टिप्पणी के अनुसार)।

इसलिए मैंने स्टीफ़न मुलर के उत्तर को थोड़ा संशोधित किया:

एक गैर-विशिष्ट मूल्यों वाला पातकवादी:

<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

Comments

अच्छा जोड़ :)

— स्टीफन मुलर

Answer 4

खोज के लिए बटन पर क्लिक करने पर आप इसे बिना लूप के पा सकते हैं।
बस विकल्प को उस विशेषता के साथ जोड़ें, जिसकी आपको आवश्यकता है (जैसे id) और इसके लिए विशिष्ट खोज करें।

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

Answer 5

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>

ऊपर दिए गए कोड से फ़ॉर्म को चुने गए विकल्प की आईडी ले जाने की सुविधा मिलती है।

Comments

यह एक गड़बड़ की तरह लगता है और SQL इंजेक्शन की तरह बदबू आ रही है। ऐसा मत करो।

— Fusseldieb

@ 23r0, यह क्यों वोट दिया गया हो सकता है के रूप में कुछ प्रतिक्रिया; यह प्रश्न विशेष रूप से फ्रंटेंड कोड के बारे में है। बैकएंड कोड सहित (जैसे PHP) अनावश्यक और भ्रमित हो सकता है। HTML के बारे में, मुझे उम्मीद है कि आपको केवल customer_id_realसबमिट किए गए अंतिम मान मिलेंगे , चयनित मूल्य नहीं।

— जॉन