عنصر قائمة البيانات datalist في لغة Html

 من العناصر التى تستخدم في النماذج forms في لغة Html عنصر الإدخال datalist وهى تشبه العنصر select الذى تحدثنا من قبل عنه وبالطبع يوجد بعض الاختلافات بينها وبينه.

فمثلا إذا كان لدينا عدد كبير من العناصر ونريد من المستخدم اختيار عنصر واحد من هذه العناصر مثل اختيار دولة من الدول فإننا نلجأ إما إلى عنصر datalist أو عنصر select

ولكتابة عنصر datalist  

    <input list="country">

        <datalist id="country">

            <option value="egypt">

            <option value="jordan">

            <option value="Iraq">

            <option value="Libya">

            <option value="India">

            <option value="china">

            <option value="US">

            <option value="Brazil">

        </datalist>

ونلاحظ أن شكل الـdatalist  تظهر على المتصفح كما يلي

نلاحظ أنه بمجرد الضغط على السهم الأسود الصغير تظهر قائمة الدول ويمكن اختيار أي دولة من هذه الدول بالضغط عليها بالسهم

ولكن يمكن البحث عن أي دولة بكتابة أي حرف من  حروف هذه الدولة فمثلا عند كتابة الحرف I نلاحظ ظهور كافة الدول التي بها الحرف I مثل Iraq-Libya-india وهذه الخاصية تسهل كثير الوصول إلى العنصر الذي نريده