كيفية إنشاء Datalist التي يمكن البحث فيها على الفور

القوائم المنسدلة هي وسيلة أنيقة ل توفير الخيارات لحقل إدخال ، خاصةً عندما تكون قائمة الخيارات المتاحة طويلة. يمكن للمستخدم اختيار الخيار الذي يريده الكتابة في هذا المجال, أو انظر من خلال الخيارات قد تكون مطابقة لما يبحثون عنه. أن تكون قادرة على البحث من خلال الخيارات, ومع ذلك ، هو الحل المثالي.

هذا السلوك يمكن أن يتحقق مع عنصر HTML ذلك يعرض اقتراحات المدخلات لعناصر تحكم مختلفة ، مثل العلامة. ومع ذلك يظهر فقط الخيارات المتاحة عندما يكون لدى المستخدم كتبته بالفعل شيء في مجال الإدخال.

يمكننا أن نجعل حقل الإدخال أكثر قابلية للاستخدام إذا مكّننا المستخدمين من ذلك الوصول إلى قائمة كاملة من الخيارات في أي وقت أثناء عملية أخذ الإدخال.

في هذا المنشور ، سنرى كيفية إنشاء ملف القائمة المنسدلة التي يمكن البحث فيها في أي وقت باستخدام بطاقة بالضبط مثل ال هوية شخصية من العلامة - هذه هي الطريقة التي نربطها ببعضها البعض.

2. جعل Datalist مرئية

افتراضيا ، فإن عنصر HTML هو مخفي. يمكننا أن نرى ذلك فقط ، عندما نكون البدء في كتابة المدخلات في الحقل يتم إرفاق datalist ل.

ومع ذلك ، فهناك طريقة "لفرض" محتوى الطبيب (أي كل خياراته) لتظهر على صفحة الويب. نحن فقط بحاجة إلى إعطائها مناسبة عرض قيمة العقار غير ذلك لا شيء, على سبيل المثال العرض محجوب؛.

 datalist display: block؛

الخيارات المعروضة لا يمكن اختياره بعد في هذه المرحلة ، المتصفح فقط يجعل الخيارات يجدها داخل الطبيب.

كما هو مذكور أعلاه ، وذلك بسبب السلوك المدمج في جزء, جزء من الخيارات تظهر بالفعل وقابلة للتحديد, ولكن فقط عندما يبدأ المستخدم في كتابة سلسلة يمكن للمتصفح استخدامها العثور على خيار مطابقة.

نحن بحاجة أيضا إلى إيجاد آلية لجعل الكل خيارات (في لقطة الشاشة أعلاه معروضة أسفل القائمة المنسدلة) اختيار في أي نقطة أخرى من عملية أخذ المدخلات - عندما يرغب المستخدمون في التحقق من الخيارات قبل كتابة أي شيء ، أو أثناء قيامهم بالفعل بأخذ شيء في حقل الإدخال.

3. أحضر عنصر HTML.

سنختار الطريقة الثانية ، لأنها أبسط ، ويسمح باستخدامها كآلية احتياطي في المتصفحات التي لا تدعم جزء. عندما يتعذر على المستعرض عرض وعرضه ، يجعل علامة HTML ، يبدو الرمز أدناه:

الجمع بين datalist مضيفا مضاعف السمة إلى ، بحيث عندما يحدد المستخدم خيارًا من القائمة المنسدلة ، سيتم عرض قيمته داخل الحقل كذلك. / * عندما يحدد المستخدم خيارًا من DDL ، اكتبه إلى حقل النص * / select.addEventListener ('تغيير' ، fill_input) ؛ function fill_input () input.value = options [this.selectedIndex] .value؛ hide_select ()؛ عيوب العيب الرئيسي لهذه التقنية هو عدم وجود طريقة مباشرة لأسلوب جزء مع المغلق (ظهور و