HTML — فهرست داده (datalist)

آخرین بروزرسانی: 1404/08/07

فهرست داده (datalist)

«فهرست داده (datalist)» برای ورودی ها پیشنهاد می سازد. یعنی هنگام تایپ، گزینه ها نمایان می شوند. بنابراین کاربر سریع تر انتخاب می کند و خطا کمتر می شود.

ساخت اتوکامپلیت با فهرست داده

&lt;label for="browser"&gt;Choose your browser from the list:&lt;/label&gt;
&lt;input list="browsers" name="browser" id="browser"&gt;
&lt;datalist id="browsers"&gt;
  &lt;option value="Edge"&gt;
  &lt;option value="Firefox"&gt;
  &lt;option value="Chrome"&gt;
  &lt;option value="Opera"&gt;
  &lt;option value="Safari"&gt;
&lt;/datalist&gt;

مشاهده در ادیتور

اتصال input و datalist چگونه است؟

ویژگی «list» در input باید برابر «id» در datalist باشد. سپس مرورگر پیشنهادها را نشان می دهد.

پشتیبانی مرورگرها

مرورگرهای محبوب از datalist پشتیبانی می کنند. نسخه حداقل در جدول منبع آمده است.

گام های عملی

یک input بساز و ویژگی list بگذار.
یک datalist با همان id تعریف کن.
گزینه ها را با option اضافه کن.

نکته: اگر نیاز به مقدار ماشینی داری، از تگ data کنار متن انسانی کمک بگیر.

CSS پیش فرض عنصر

datalist {
  display: none;
}