Flexdatalist - ऑटोकॉम्पटिन प्लग इन

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

यह एक इनपुट फ़ील्ड पर काम करता है जहाँ आप कर सकते हैं इनपुट के लिए स्वत: पूर्ण मूल्य. डिफ़ॉल्ट सेटअप ठीक दिखता है और हमने ऑटोसुगेस्ट डलाटिस्ट्स के साथ कूल इफेक्ट्स बनाने पर कुछ कोडिंग युक्तियों को कवर किया है.

हालाँकि, यह बहुत आसान है एक प्लगइन के साथ काम करते हैं जैसे कि Flexdatalist. यह ब्राउज़रों की एक विस्तृत सरणी का समर्थन करता है और आपको अनुमति देता है अपने डटलिस्ट के डिजाइन को पूरी तरह से अनुकूलित करें.

हर किसी को स्वत: पूर्ण सुविधाओं की आवश्यकता नहीं है और देशी HTML5 datalists के साथ, आप एक प्लगइन के साथ परेशान नहीं कर सकते हैं। हालाँकि, Flexdatalist शायद वहाँ से बाहर सबसे अच्छा है क्योंकि यह देशी नस्लवादी व्यवहार पर बनाता है जोड़ने के लिए:

• मोबाइल उत्तरदायी समर्थन
• प्रत्येक आइटम के लिए अतिरिक्त विवरण
• एक साथ कई चयन के लिए विकल्प
• कस्टम इवेंट हैंडलर

आईटी इस सभी jQuery द्वारा संचालित, इसलिए तुम करोगे नवीनतम संस्करण की एक प्रति की आवश्यकता है इसे चलाने के लिए। यह भी अपने खुद के सीएसएस स्टाइलशीट के साथ आता है जो आप HTTP अनुरोधों को कम करने के लिए एक एकल CSS फ़ाइल में संयोजित करना चाहते हैं.

तुम खोज सकते हो पूर्ण सेटअप निर्देश मुख्य डेमो पेज पर जिसमें शामिल हैं Flexdatalist फ़ाइलों के लिए डाउनलोड लिंक.

यह वास्तव में, के साथ स्थापित करने के लिए सरल है जावास्क्रिप्ट की सिर्फ एक पंक्ति. डिफ़ॉल्ट रूप से, प्लगइन कक्षा के साथ सभी आदानों को लक्षित करता है .flexdatalist, इसलिए अपने कोड में इसे जोड़ने से परिणाम देखने के लिए पर्याप्त होना चाहिए.

तुम बस जोड़ दो आपके इनपुट फ़ील्ड और Flexdatalist के अंदर का तत्व बाकी को संभालता है। यह हूँ सूची को ऑटो-स्टाइल करें, वैकल्पिक वर्णनात्मक पाठ सहित.

अतिरिक्त पाठ जोड़ने का सबसे सरल तरीका है एक JSON फ़ाइल के माध्यम से जो आप कर सकते हैं डेटा विशेषता के माध्यम से अपने इनपुट को संलग्न करें.

उदाहरण के लिए, यदि आप Flexdatalist डेमो पृष्ठ की जाँच करते हैं, तो आप पाएंगे “देश” विशेषता के साथ इनपुट फ़ील्ड डेटा-डेटा = 'countries.json'. यह एक दूरस्थ फ़ाइल का संदर्भ देता है सभी कच्चे इनपुट डेटा को बाहरी रूप से संग्रहीत करता है.

इन क्षेत्रों में से कई आप कर सकते हैं पृष्ठ को थोड़ा धीमा करें. हालाँकि, मैं कल्पना नहीं कर सकता कि कई साइटें एक पृष्ठ पर इनमें से कुछ से अधिक घातक रूप से चलेंगी, इस jio प्लगइन के साथ भी उल्लेख नहीं करने के लिए, वे हैं अभी भी बहुत तेज है.

आरंभ करने के लिए, बस GitHub रेपो पर जाएँ और एक प्रति डाउनलोड करें. इसमें ए शामिल है मुख्य डेमो पेज के लिए लिंक जिसके पास सेटअप, जावास्क्रिप्ट विकल्प, और बहुत सारे सैंपल कोड स्निपेट्स के लिए पूर्ण प्रलेखन है.