HTML Datalist shows extra options separated by horizontal line

Question

I am passing 10 options to datalist which are displayed fine in dropdown. But sometime I am getting couple of more options separated by horizontal line at the bottom of option list(Chrome might be cacheing or displaying some option repeated). I am not able to get why chrome is showing these extra options separated by horizontal line

Answer 1

I went through different articles available on internet related to datalist and I came to know that datalist accepts autocomplete attribute. It give me a hint that extra options(might be - Previous searches, suggestions) I am getting are might be due to autocomplete feature of datalist, So I tried setting it to "off". Now I am not getting those extra option and horizontal line in option list anymore. E.g. code snippet -

<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>

I also came across one more attribute which datalist accepts, autocorrect="off". But I do not needed this attribute to resolve above problem.