HTML डेटालिस्ट

बार-बार एक ही value टाइप करना थका देने वाला है, और exact spelling याद रखना भी मुश्किल हो सकता है। <datalist> element एक normal text input में suggested values की एक list जोड़कर इसे solve करता है, ठीक किसी सर्च इंजन के autocomplete suggestions जैसा। dropdown <select> के विपरीत, datalist visitors को सिर्फ list में से चुनने पर मजबूर नहीं करता। वे फिर भी कोई भी value टाइप कर सकते हैं, लेकिन टाइप करते समय, browser चीज़ों को तेज़ करने और spelling mistakes कम करने के लिए matching suggestions दिखाता है। यह <datalist> को country names, product categories, या search boxes जैसे fields के लिए आदर्श बनाता है, जहाँ visitors को common answers की ओर guide करना मददगार है, लेकिन उन्हें choices के किसी fixed set तक सीमित रखना ज़रूरी नहीं।

In this page:

<datalist> क्या है?
एक Datalist को Input से जोड़ना
डेटालिस्ट ऑप्शन्स को डायनामिक रूप से पॉपुलेट करना
Datalist बनाम Select Dropdown
ब्राउज़र बर्ताव और सीमाएँ

Syntax

markup

<input list="listid">
<datalist id="listid">
  <option value="value">
</datalist>

<datalist> क्या है?

<datalist> element predefined <option> values का एक सेट define करता है जिन्हें किसी visitor के जुड़े हुए text input में टाइप करते समय suggest किया जा सकता है, बिना उन्हें सिर्फ इन्हीं चुनावों तक सीमित किए।

Note:

datalist suggestions को मददगार shortcuts समझें, allowed answers की सख्त सूची नहीं।
Accepted attributes:
datalist id — referenced by the input list attribute
option value — suggested value
option label — optional text

Warning: बिना connected input वाले datalist का page पर बिल्कुल कोई visible effect नहीं होता।

उदाहरण: What Is <datalist>?

markup

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

एक Datalist को Input से जोड़ना

किसी input और उसके suggestions के बीच connection पूरी तरह input के list attribute के datalist के id से match करने पर निर्भर करता है। लिंक होने के बाद, visitor के टाइप करते ही browser अपने आप datalist के options दिखाता है।

Note:

datalist को एक descriptive, unique id दें ताकि बड़े forms में यह ट्रेस करना आसान हो कि यह किस input से जुड़ा है।
Accepted values:
list — the id of a datalist element
Works with text, search, url, tel, email, number, date, color, range

Warning: बेमेल list और id pair एक silent failure है; कोई error नहीं दिखता, suggestions बस कभी दिखते ही नहीं।

उदाहरण: Connecting a Datalist to an Input

markup

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
</datalist>

डेटालिस्ट ऑप्शन्स को डायनामिक रूप से पॉपुलेट करना

datalist options HTML source में fixed होना ज़रूरी नहीं, इन्हें JavaScript से जोड़ा या बदला जा सकता है, जो उन suggestions के लिए उपयोगी है जो किसी search API से आती हैं या visitor की activity के आधार पर बदलती हैं।

Note: किसी API से suggestions बनाते समय network requests को debounce करें, ताकि हर keystroke पर request न भेजी जाए।

Warning: बड़ी संख्या में options को बार-बार clear और rebuild करने से suggestion list में noticeable flicker हो सकता है।

उदाहरण: Populating Datalist Options Dynamically

markup

<input list="results" id="search">
<datalist id="results"></datalist>
<script>
  document.getElementById('results').innerHTML = '<option value="Apple">';
</script>

Datalist बनाम Select Dropdown

एक <select> dropdown visitors को सिर्फ लिस्ट किए गए options तक सीमित रखता है, जबकि एक <datalist> सिर्फ values suggest करता है और फिर भी कोई भी free-typed text accept करता है। इनके बीच चुनाव इस बात पर निर्भर करता है कि flexibility ज़्यादा ज़रूरी है या strict validation।

Note: जब सिर्फ answers का एक तय सेट ही valid हो तो <select> इस्तेमाल करें, और जब visitors को guide करना मददगार हो लेकिन free text भी accept होना चाहिए तो <datalist>।

Warning: जब strict validation चाहिए हो तब <datalist> इस्तेमाल करने का मतलब है कि invalid values को फिर भी अलग से पकड़ना होगा, क्योंकि datalist खुद उन्हें enforce नहीं करता।

उदाहरण: Datalist vs Select Dropdown

markup

<select>
  <option value="Small">Small</option>
</select>
<input list="sizes">
<datalist id="sizes">
  <option value="Small">
</datalist>

ब्राउज़र बर्ताव और सीमाएँ

हालाँकि हर आधुनिक browser <datalist> support करता है, suggestion dropdown का exact दिखना, और एक साथ कितने options दिखते हैं, अलग-अलग browsers और devices में थोड़ा अलग हो सकता है।

Note: अपनी datalist को कुछ अलग-अलग browsers पर test करें ताकि पुष्टि हो सके कि suggestion list आपकी उम्मीद के मुताबिक दिखती और बर्ताव करती है।

Warning: कुछ mobile browsers datalist suggestions को desktop browsers से अलग तरीके से दिखाते हैं, इसलिए experience को phone या tablet पर भी हमेशा चेक करें।

उदाहरण: Browser Behavior and Limitations

markup

<input list="colors">
<datalist id="colors">
  <option value="Red">
  <option value="Blue">
</datalist>

Live Example

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Output Element Next Lesson → HTML Image Maps

HTML डेटालिस्ट

<datalist> क्या है?

एक Datalist को Input से जोड़ना

डेटालिस्ट ऑप्शन्स को डायनामिक रूप से पॉपुलेट करना

Datalist बनाम Select Dropdown

ब्राउज़र बर्ताव और सीमाएँ

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code