يبدو في بعض الأحيان أن ملء النماذج أمر مرهق. من المهم توفير خيارات متعدّدة للمستخدمين مع إتاحة إمكانية الكتابة بحرية. إنّ العنصر datalist
(الذي وصل إلى Chrome Canary (M20) أصبح مهمة سهلة للغاية.
باستخدام datalist
، يمكن لتطبيقك تحديد قائمة بالنتائج المقترَحة التي يجب أن يختار المستخدمون من بينها. ويمكنه إما تحديد خيار من القائمة أو إدخال نص حر الشكل.
يمكن إقران الخيارات مع datalist
من خلال تحديد id
في السمة list
للعنصر input
:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
يتوفر datalist
على نطاق واسع على أحدث إصدارات Firefox وOpera وInternet Explorer بعد الإصدار 10. لذا، لا داعي للقلق بشأن التوافق كثيرًا، ولكن إذا أردت التأكد من أنه يعمل عبر المتصفحات، جرِّب ما يلي:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
في حال توفّر السمة datalist
على متصفّحك، سيتم إخفاء جميع العناصر ضمن datalist
باستثناء عناصر option
. إذا كنت تستخدم هذه الآلية الاحتياطية، تأكَّد من أنّ الخادم يتعرّف على كل من "fruit_sel" و"fruit" كمَعلمات طلب البحث.