How to turn off autocomplete while keep using datalist element in html

autocomplete, browser-history, html, html-datalist

Solution

Is it possible for you to use the `input` field without an `id` or `name` attribute? Without that, the browser doesn't really have any way to associate a history with that element.

In my real quick testing on Firefox, this seemed to do the trick:

<form>
  <!-- these will remember input -->
  With id: <input id="myInputId" list="myList" /><br />
  With name: <input name="myInputName" list="myList" /><br />

  <!-- these will NOT remember input -->
  No id, name, class: <input list="myList" /><br />
  With class: <input class="myInputClass" list="myList" />

  <datalist id="myList">
    <option value="Option 1"></option>
    <option value="Option 2"></option>
  </datalist>

  <br />

  <input type="submit" />
</form>

In the code above, the `input`s with an `id` or `name` would remember past values, but the `input` without anything and the input with just a `class` would not remember anything.

Unfortunately, this does make using the `input` slightly more difficult if you need it to have a `name` or `id`. In that case, I'd try having an `id`'ed `input` which is also `display: none`'ed and then use some JavaScript to keep it in sync with an `input` that won't remember past values.

Problem

I have a `input` field which shows a list using html5 `<datalist>` element. The problem is that with `<datalist>` the browser autocomplete also shows the history list (which is the list of previously typed values, that are not included in the `<datalist>`). So I just want to get rid of the `history-list` not the `<datalist>`. If I use the `autocomplete = "off"` feature, this also blocks the `<datalist>`. In short, I just want the `<datalist>` not the history one.

Original source