टैग datalist
टैग datalist HTML फॉर्म में
इनपुट फ़ील्ड्स input
के लिए ऑटो-पूर्णता बनाता है।
ऑटो-पूर्णता का सार: जब उपयोगकर्ता इनपुट फ़ील्ड में कुछ टाइप करने का प्रयास करेगा, तो नीचे एक पॉप-अप सुझाव दिखाई देगा, जो उपलब्ध विकल्पों की सूची के रूप में प्रस्तुत होगा। उपयोगकर्ता सुझाए गए विकल्पों में से एक को पूरा टाइप किए बिना ही चुन सकेगा।
टैग input से
ऑटो-पूर्णता को लिंक करने के लिए, उसे list एट्रिब्यूट
देना आवश्यक है, जिसमें लिंक किए गए datalist टैग का
id एट्रिब्यूट
निर्दिष्ट करना चाहिए।
चयन विकल्प option टैग्स में संग्रहीत होते हैं,
जो बदले में datalist टैग के अंदर संग्रहीत होते हैं।
उदाहरण
आइए इनपुट फ़ील्ड में एक देश का नाम दर्ज करें। पहले अक्षर
'b' टाइप करें - और तीन देशों की एक पॉप-अप सूची देखेंगे।
फिर अक्षर 'e' टाइप करें - सुझाए गए देशों की संख्या दो रह जाएगी:
<input type="text" list="country">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
</datalist>
:
उदाहरण
आइए अब option टैग में value एट्रिब्यूट जोड़ें।
किसी विशेष देश के चयन पर, लिंक्ड इनपुट में देश का नाम नहीं,
बल्कि value एट्रिब्यूट की सामग्री दिखाई देगी:
<input type="text" list="country-value">
<datalist id="country-value">
<option value="Belarus">Belarus - a country of lakes and potatoes</option>
<option value="Belgium">Belgium - a country where Belgians live</option>
<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>
:
उदाहरण . autocomplete एट्रिब्यूट का प्रभाव
ड्रॉप-डाउन सुझाव सूची पर autocomplete
एट्रिब्यूट का प्रभाव पड़ता है। यदि यह चालू है (जो डिफ़ॉल्ट रूप से होता है),
तो आपके द्वारा datalist टैग में दिए गए मानों के साथ, वे मान भी
मिश्रित होंगे जो उपयोगकर्ता ने पहले इस फ़ील्ड में दर्ज किए थे।
फ़ील्ड में 'Brazil' टाइप करें और सबमिट बटन दबाएँ
(सबमिट किए बिना ब्राउज़र इस देश को याद नहीं रखेगा)।
फिर इस उदाहरण पर वापस आएं और अक्षर 'b' टाइप करें -
प्रकट होने वाली सूची में आप datalist के 3 देशों
के अलावा पहले दर्ज किया गया देश भी देखेंगे (इसके अलावा,
यदि आप 'Belarus' शब्द के साथ भी ऐसा ही करते हैं -
तो ड्रॉप-डाउन सूची में यह मान दो बार होगा)।
यदि यह आपको परेशान करता है - तो autocomplete
एट्रिब्यूट को off वैल्यू देकर बंद कर दें।
उपरोक्त वर्णित कार्यवाही उदाहरण के साथ करें:
<form action="">
<input type="text" list="country" autocomplete="on">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
<input type="submit">
</datalist>
</form>
:
यह भी देखें
-
एट्रिब्यूट
autocomplete,
जो फॉर्म फ़ील्ड्स को ऑटो-पूर्णता प्रदान करता है
