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