يبدو في بعض الأحيان أن ملء النماذج أمر مرهق. من المهم توفير خيارات متعدّدة للمستخدمين مع إتاحة إمكانية الكتابة بحرية. إنّ العنصر 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" كمَعلمات طلب البحث.