התגית datalist

מגדירה ערכים אפשריים לשדה טקסט, כך שכשהגולש יתחיל להקליד את הערך – הדפדפן יציג קובייה עם ערכים המתחילים באותן האותיות, כהצעה להשלמה אוטומטית.

בדוגמא שלפנינו, אם הגולש יקליד את האות “א” בשדה הטקסט, שתי האפשרויות איטליה ואנגליה יופיעו כאפשרויות להשלמה אוטומטית, והגולש יוכל להמשיך להקליד או לבחור את האפשרות הרצוייה מתוכן.

לא ניתן לחייב את המשתמש לבחור רק אחת מהאפשרויות הללו, לשם כך קיימת התגית <select>

דוגמאת קוד

<input type=”text” list=”countries”>

<datalist id="countries">
   <option value=”ישראל”>
   <option value=”אנגליה”>
   <option value=”צרפת”>
   <option value=”איטליה”>
</datalist>

תמיכת דפדפנים

דפדפן אקספלורר מגירסא 9 ומטה אינו תומך בתגית זו. כדי להישתמש בתגית זו בדפדפן אקספלורר 9 ומטה, אפשר להישתמש באחד הפלאגינים הללו (מתוך Modernizr):

• jQuery HTML5 datalist plugin by miketaylr
• Relevant Dropdowns by Chris Coyier
• datalist fallback by adactio. Not a polyfill, but it's done with PE
• Webshims Lib has support for datalist-element (includes input[list], input[selectedOption], datalist[options]) by Alexander Farkas