HTML Datalist 显示由水平线分隔的额外选项

Question

我将 10 个选项传递给数据列表，这些选项在下拉列表中显示良好。但有时我会在选项列表底部获得更多由水平线分隔的选项(Chrome 可能正在缓存或重复显示某些选项)。我不明白为什么 chrome 显示这些额外的选项由水平线分隔

Answer 1

我浏览了互联网上与 datalist 相关的不同文章，我了解到 datalist 接受自动完成属性。它给了我一个提示，我得到的额外选项(可能是 - 以前的搜索、建议)可能是由于数据列表的 autocomplete 功能，所以我尝试将其设置为“off ”。现在我不再在选项列表中获得那些额外的选项和水平线了。例如。代码片段 -

<input list="browsers" autocomplete="off">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

我还发现了另一个 datalist 接受的属性，autocorrect="off"。但是我不需要这个属性来解决上述问题。