HTML Academy · पाठ

ऑटोकम्प्लीट के लिए Datalist

datalist एलिमेंट से इनपुट मान सुझाएँ

पाठ 4, कुल 4 में से13 चरण

ऑटोकम्प्लीट के लिए Datalist, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

डेटालिस्ट क्या है

<datalist> तत्व किसी <input> के लिए पहले से निर्धारित सुझावों की सूची प्रदान करता है:

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

डेटालिस्ट बनाम select

<datalist> और <select> के बीच मुख्य अंतर:

डेटालिस्ट — मुक्त पाठ + सुझाव, उपयोगकर्ता कुछ भी टाइप कर सकता है
select — सीमित विकल्प, उपयोगकर्ता को सूची में से ही चुनना होता है

जब आप मानों का सुझाव देना चाहते हों, लेकिन इनपुट को सीमित न करना चाहते हों, तब डेटालिस्ट का उपयोग करें।

डेटालिस्ट को इनपुट से जोड़ना

<input> का list एट्रिब्यूट <datalist> के id से मेल खाना चाहिए:

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

विभिन्न इनपुट प्रकारों के साथ डेटालिस्ट

<datalist> कई इनपुट प्रकारों के साथ काम करता है:

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

डेटालिस्ट में विकल्प लेबल

डेटालिस्ट के विकल्पों में दिखाई देने वाला लेबल और सबमिट किया जाने वाला मान हो सकता है:

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

सुझाव फ़िल्टर करना

उपयोगकर्ता के टाइप करते ही ब्राउज़र सुझावों को फ़िल्टर करता है:

मिलान करने की विधि ब्राउज़र के अनुसार बदलती है
कुछ ब्राउज़र शुरुआत से मिलान करते हैं; अन्य स्ट्रिंग में कहीं भी मिलान करते हैं
आप ब्राउज़र के फ़िल्टर करने के व्यवहार को नियंत्रित नहीं कर सकते
कस्टम फ़िल्टरिंग के लिए ARIA के साथ कस्टम स्वतः-पूर्णता घटक बनाएँ

JavaScript से गतिशील डेटालिस्ट

डेटालिस्ट के विकल्पों को गतिशील रूप से अपडेट करें:

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

डेटालिस्ट की सुगम्यता

डेटालिस्ट की सुगम्यता से जुड़े विचार:

स्क्रीन रीडर सुझावों को सूची बॉक्स के रूप में पढ़कर सुनाते हैं
उपयोगकर्ता तीर कुंजियों से सुझावों में नेविगेट कर सकते हैं
इनपुट अभी भी मुक्त पाठ स्वीकार करता है — सुनिश्चित करें कि सत्यापन इसे संभालता है

ब्राउज़र समर्थन से जुड़ी टिप्पणियाँ

डेटालिस्ट के लिए ब्राउज़र समर्थन अच्छा है, लेकिन कुछ असामान्यताएँ हैं:

Chrome, Edge, Firefox: पूर्ण समर्थन
Safari: Safari 12.1+ से समर्थित
मोबाइल ब्राउज़र: अधिकांश सुझाव दिखाते हैं, लेकिन यूआई अलग-अलग होता है
डेटालिस्ट पर निर्भर करने से पहले लक्षित ब्राउज़र पर हमेशा परीक्षण करें

डेटालिस्ट का उपयोग कब न करें

डेटालिस्ट इन स्थितियों में आदर्श नहीं है:

आपको कठोर सत्यापन चाहिए, यानी उपयोगकर्ता को सूची में से ही चुनना हो
आपको कस्टम विकल्प शैली चाहिए, क्योंकि ब्राउज़र पूरे रूप-रंग को नियंत्रित करता है
आपको समूह बनाने की आवश्यकता है, क्योंकि डेटालिस्ट में optgroup समर्थित नहीं है

ऐसे मामलों में ARIA role="combobox" के साथ कस्टम स्वतः-पूर्णता घटक का उपयोग करें।

डेटालिस्ट बनाम खोज इनपुट

स्वतः-पूर्णता वाले डेटालिस्ट और खोज इनपुट की तुलना करें:

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

त्वरित जाँच

आप किसी इनपुट को उसके डेटालिस्ट तत्व से कैसे जोड़ते हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति: डेटालिस्ट

डेटालिस्ट की मुख्य बातें:

<datalist id> + <input list> — मेल खाते id/list से जुड़े होते हैं
उपयोगकर्ता स्वतंत्र रूप से टाइप कर सकता है या कोई सुझाव चुन सकता है
जब विकल्प सीमित रखना हो, तो <select> का उपयोग करें
पाठ, रेंज, रंग और अन्य इनपुट प्रकारों के साथ काम करता है
उपयोगकर्ता के टाइप करते ही सुझाव फ़िल्टर हो जाते हैं

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ऑटोकम्प्लीट के लिए Datalist” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ऑटोकम्प्लीट के लिए Datalist” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ऑटोकम्प्लीट के लिए Datalist” में मैं क्या सीखूँगा?

datalist एलिमेंट से इनपुट मान सुझाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“ऑटोकम्प्लीट के लिए Datalist” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ