क्या एचटीएमएल 5 डेटालिस्ट के लिए कोई चयनित इंडेक्स है?

Question

आप किसी भी select तत्व की वर्तमान option चुन सकते हैं:

mySelect.options[mySelect.selectedIndex] 

मैं एक DataList साथ भी ऐसा ही कर सकते हैं? कुछ इस तरह:

<input id = "input" list = "datalist" type = "text" /> 

<datalist id = "datalist"> 
    <option value = "No. 1"></option> 
    <option value = "No. 2"></option> 
    <option value = "No. 3"></option> 
</datalist> 

<script> 
    var datalist = document.getElementById ("datalist"); 
    var input = document.getElementById ("input"); 

    input.addEventListener ("keyup", function (event) { 
     if (event.which === 13) { 
      alert (datalist.options[datalist.selectedIndex]); // Example 
     } 
    }, false); 
</script> 

Answer 1

नहीं, डाइटलिस्ट तत्व इनपुट के लिए स्वत: पूर्ण प्रदान करने के लिए है। यह डेटा का स्रोत है, उपयोगकर्ता से छिपा हुआ है, और कई इनपुट इससे लिंक हो सकते हैं। इसलिए selectedIndex होने का अर्थ नहीं है।

इसके बजाय, आप बस की जाँच करनी चाहिए इनपुट के .value:

var datalist = document.getElementById ("datalist"); 
var input = document.getElementById ("input"); 

input.addEventListener ("keyup", function (event) { 
    if (event.which === 13) { 
     alert(input.value); 
    } 
}, false); 

Answer 2

specs से परखने के बाद, datalist वस्तु selectedIndex संपत्ति नहीं है। लेकिन आप इसे डिफ़ॉल्ट विकल्प पा सकते हैं, जिसमें selected है। या प्रत्येक विकल्प मान में इनपुट के मान की तुलना करें और मैन्युअल रूप से इंडेक्स ढूंढें।

Answer 3

for (var i=0;i<datalist_id.options.length;i++) 
    if (datalist_id.options[i].value == input_id.value) 
     {alert(datalist_id.options[i].innerText);break;} 

Answer 4

तुम बस इनपुट तत्व के लिए एक मूल्य जोड़ सकते हैं। यह उपयोगकर्ता को "डिफ़ॉल्ट" मान के रूप में दिखाया जाएगा। उपयोगकर्ता, यानी इसे बदलने के इनपुट फ़ील्ड से यह मान हटाना चाहता है, तो DataList में सूची में दिखाई देगा:

<input list="browsers" name="browser" value="Internet Explorer"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist>