Flexdatalist - البرنامج المساعد للإكمال التلقائي مع دعم
ال HTML5 جزء مفيد جدا في تطوير الواجهة الحديثة. ومع ذلك ، فهو واحد من تلك العناصر التي لا يعرفها الكثير من المطورين.
وهو يعمل في حقل الإدخال حيث يمكنك autosuggest قيم معينة للإدخال. يبدو الإعداد الافتراضي على ما يرام وقد قمنا بتغطية بعض نصائح الترميز على إنشاء تأثيرات رائعة باستخدام autosuggest datalists.
ومع ذلك ، فإنه من الأسهل بكثير العمل مع البرنامج المساعد مثل Flexdatalist. هذا يدعم مجموعة واسعة من المتصفحات ويتيح لك ذلك تخصيص تماما تصميم datalist الخاص بك.
ليس كل شخص بحاجة إلى ميزات الإكمال التلقائي ومع زملاء HTML5 الأصليين ، فقد لا تهتم بمكون إضافي. ومع ذلك ، فليكسداليست ربما يكون أفضل واحد هناك لأنه يعتمد على سلوكيات طبيب الأسنان الأصلي لإضافة:
- دعم استجابة المحمول
- أوصاف إضافية لكل عنصر
- خيارات متعددة التحديدات في وقت واحد
- معالجات الأحداث المخصصة
انها جميع مدعوم من مسج, اذا انت سوف بحاجة الى نسخة من أحدث نسخة للحصول على هذا الركض. هذا ايضا يأتي مع ورقة أنماط CSS الخاصة به التي قد ترغب في دمجها في ملف CSS واحد لتقليل طلبات HTTP.
يمكنك إيجاد تعليمات الإعداد الكامل على الصفحة التجريبية الرئيسية التي تشمل روابط التحميل لملفات Flexdatalist.
انها حقا سهلة الإعداد ، مع مجرد سطر واحد من جافا سكريبت. افتراضيا ، البرنامج المساعد يستهدف جميع المدخلات مع الفصل .flexdatalist, لذلك يجب أن يكون مجرد إضافة ذلك إلى الكود الخاص بك يكفي لرؤية النتائج.
يمكنك فقط إضافة عنصر داخل حقل الإدخال الخاص بك و Flexdatalist يعالج الباقي. أنه سوف النمط التلقائي القائمة, بما في ذلك النص الوصفي اختياري.
إن أبسط طريقة لإضافة نص إضافي هي من خلال ملف JSON التي يمكنك نعلق على المدخلات الخاصة بك من خلال سمة البيانات.
على سبيل المثال ، إذا قمت بفحص صفحة العرض التوضيحي لـ Flexdatalist ، فستجد لك “بلدان” حقل الإدخال مع السمة = البيانات البيانات 'countries.json ". هذا يشير إلى ملف بعيد ذلك يخزن جميع بيانات المدخلات الخام خارجيا.
الكثير من هذه الحقول يمكنك إبطاء الصفحة قليلا. ومع ذلك ، لا أستطيع أن أتخيل أن العديد من المواقع ستعمل أكثر من عدد قليل من هذه النماذج التي تحتوي على قواعد البيانات على صفحة واحدة ، ناهيك عن ذلك مع هذا المكون الإضافي jQuery ، لا تزال سريعة جدا.
لتبدأ ، فقط تفضل بزيارة GitHub repo وقم بتنزيل نسخة. وهذا يشمل أ رابط إلى الصفحة التجريبية الرئيسية الذي يحتوي أيضًا على وثائق كاملة للإعداد ، وخيارات JavaScript ، والكثير من مقتطفات شفرة التعليمات البرمجية للتجول بها.
