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

Question

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.

Answer 1

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