اسماء المنتجات حسب اللي هو بيكتبه في الـInput المخصص للـSearch

معلومة على السريع
لو جربت تشتغل على Search Bar قبل كدة، أكيد هتيجي في دماغك فكرة الـAuto Complete، يعني ببساطة بدل ما المستخدم يضطر يكتب اسم المنتج كله مثلًا، هيظهرله قائمة فيها اسماء المنتجات حسب اللي هو بيكتبه في الـInput المخصص للـSearch

بمعنى أوضح، خش على جوميا أو نون، كل اما تكتب حرف في الـSearch Bar بيعرضلك أسماء منتجات مختلفة على حسب الحرف اللي انت كتبته، وضحت الرؤية؟ طب ممتاز

حاجة زي دي ليها عنصر مخصوص في الـHTML، وهو ببساطة عنصر الـDatalist، هنا انت مجرد بتعمل List فيها مجموعة من الـOptions، الـList دي بيبقى ليها ID معين وبتربطه بالـInput عن طريق الـList Attribute، وببساطة بتظهر الـList دي للمستخدم مع كل حرف جديد بيدخله في الـInput

(هسيبلك في أول كومنت لينك تجرب منه الكود)

في الشغل الفعلي الداتا اللي جوة الـDatalist مش بتبقى ثابتة، بالعكس الموقع بيجيبها من الـDatabase عن طريق Ajax Request، ولكن ده مش موضوعنا دلوقتي، بس حبيت أديك Hint عشان لو عاوز تبحث عن تطبيق عملي الـDatalist 😄

وبس كدة، بوست قصير المرادي عشان محدش يزهق من البوستات الطويلة، وكالعادة، ده الموضوع ببساطة.

الجينيص
HTML5 Notes

الجينيص