कैसे एक Datalist बनाने के लिए है कि तुरंत खोजने योग्य है

ड्रॉपडाउन सूचियों के लिए एक साफ तरीका है विकल्प प्रदान करना इनपुट क्षेत्र के लिए, विशेषकर जब उपलब्ध विकल्पों की सूची लंबी हो। एक उपयोगकर्ता उस विकल्प को चुन सकता है जिसे वे चाहते हैं क्षेत्र में टाइपिंग, या विकल्पों के माध्यम से देखो हो सकता है कि वे जिस चीज की तलाश कर रहे हैं, वह मैच हो. विकल्पों के माध्यम से खोज करने में सक्षम होना, हालाँकि, आदर्श समाधान है.

इस व्यवहार के साथ प्राप्त किया जा सकता है HTML तत्व जो इनपुट सुझाव प्रदर्शित करता है विभिन्न नियंत्रणों के लिए, जैसे कि टैग। हालाँकि उपयोगकर्ता के पास उपलब्ध विकल्पों को ही दिखाता है पहले से ही कुछ टाइप किया है इनपुट क्षेत्र में.

यदि हम उपयोगकर्ताओं को सक्षम करते हैं तो हम एक इनपुट फ़ील्ड को अधिक उपयोगी बना सकते हैं विकल्पों की पूरी सूची तक पहुँचें किसी भी समय इनपुट लेने की प्रक्रिया के दौरान.

इस पोस्ट में, हम यह देखने जा रहे हैं कि कैसे बनाएँ ड्रॉप-डाउन सूची जो किसी भी समय खोजी जा सकती है का उपयोग करते हुए टैग के समान है आईडी का टैग - यह है कि हम उन्हें एक दूसरे से कैसे बांधते हैं.

2. Datalist को दर्शनीय बनाएं

डिफ़ॉल्ट रूप से HTML तत्व है छिपा हुआ. हम इसे तभी देख सकते हैं, जब हम एक इनपुट टाइप करना शुरू करें क्षेत्र में डकैत से जुड़ा हुआ है.

हालाँकि, डैटिस्ट की सामग्री को "बाध्य" करने का एक तरीका है (अर्थात इसके सभी विकल्प) वेबपेज पर प्रदर्शित होने के लिए. हमें केवल इसे उपयुक्त रूप देने की आवश्यकता है प्रदर्शन संपत्ति मूल्य के अलावा अन्य कोई नहीं, उदाहरण के लिए प्रदर्शन क्षेत्र;.

 datalist प्रदर्शन: ब्लॉक;

प्रदर्शित विकल्प अभी तक चयन करने योग्य नहीं हैं इस बिंदु पर, केवल ब्राउज़र विकल्पों को प्रस्तुत करता है यह पाताल के अंदर पाया जाता है.

जैसा कि पूर्वोक्त, निर्मित व्यवहार के कारण तत्त्व, विकल्पों का एक हिस्सा पहले से ही दिखाई देता है और चयन करने योग्य होता है, लेकिन केवल जब उपयोगकर्ता एक स्ट्रिंग में टाइप करना शुरू करता है जिससे ब्राउज़र कर सकता है एक मेल विकल्प खोजें.

हमें बनाने के लिए एक तंत्र खोजने की भी जरूरत है सब विकल्प (ड्रॉपडाउन डटलिस्ट के तहत प्रदर्शित उपरोक्त स्क्रीनशॉट पर) चयन पर इनपुट लेने की प्रक्रिया का कोई अन्य बिंदु - जब उपयोगकर्ता कुछ भी लिखने से पहले विकल्पों की जांच करना चाहते हैं, या जब वे पहले से ही इनपुट क्षेत्र में कुछ ले चुके हों.

3. अंदर लाओ HTML तत्व.

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

Datalist के साथ संयुक्त जोड़ रहा है विभिन्न को विशेषता टैग, ताकि जब उपयोगकर्ता ड्रॉप-डाउन सूची से एक विकल्प का चयन करे, तो इसका मूल्य अंदर प्रदर्शित होगा साथ ही क्षेत्र. / * जब उपयोगकर्ता DDL से एक विकल्प का चयन करता है, तो उसे टेक्स्ट फ़ील्ड पर लिखें * / select.addventventListener ('परिवर्तन', fill_input); function fill_input () input.value = Options [this.selectedIndex] .value; hide_select (); कमियां इस तकनीक का मुख्य दोष है शैली के लिए एक सीधा रास्ता की अनुपस्थिति तत्त्व सीएसएस के साथ (की उपस्थिति) तथा