Chrome ने Chrome 20 में, input[type=text] के लिए datalist का इस्तेमाल करना शुरू कर दिया है. datalist की मदद से, डेवलपर को सुझाई गई वैल्यू उपलब्ध कराने में मदद मिलती है. साथ ही, उपयोगकर्ताओं को एक ही समय पर आर्बिट्रेरी वैल्यू लिखने की सुविधा मिलती है. Chrome 23 की शुरुआत से, datalist का इस्तेमाल input[type=range] और input[type=color] के लिए भी किया जा सकता है!
input[type=range]
input[type=range] के लिए datalist की मदद से, डेवलपर स्लाइडर के बगल में इंडिकेटर दिखा सकते हैं, जैसा कि यहां दिखाया गया है:
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
<option>10</option>
<option>15</option>
<option>30</option>
<option>50</option>
<option>90</option>
</datalist>
इनपुट पर स्लाइडर थंब को ले जाने से हर टिक टिक पर स्नैप हो जाता है, ताकि उपयोगकर्ता उन वैल्यू को आसानी से अडजस्ट कर सकें.
input[type=color]
input[type=color] पहले से ही Chrome में काम करता है और Opera. JavaScript प्लगिन की मदद के बिना, उपयोगकर्ता आर्बिट्रेरी रंग चुन सकते हैं.
datalist को input[type=color] में जोड़ने पर, उपयोगकर्ता डेवलपर के चुने गए कलर स्वैच में से कोई कलर चुन सकते हैं. साथ ही, वे कलर पिकर से अपनी पसंद का कोई भी रंग चुन सकते हैं.
<input type="color" value="#000000" list="colors" />
<datalist id="colors">
<option>#ff0000</option>
<option>#0000ff</option>
<option>#00ff00</option>
<option>#ffff00</option>
<option>#00ffff</option>
</datalist>
ध्यान दें कि input[type=color] के लिए datalist सिर्फ़ रंग के हेक्स मान को स्वीकार करता है (जैसे, #ff0000) और #f00 या red जैसे मान काम नहीं करेंगे.
इन नई सुविधाओं का इस्तेमाल करने के लिए, डेमो पेज पर जाएं.