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

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.

Try using the HTML attribute autocomplete

<input name="q" type="text" autocomplete="off"/>

source Turn Off Autocomplete for Input

I use a code like this:

<input name="anrede" list="anrede" onmousedown="value = '';" />
<datalist id="anrede">
    <option value="Herr"></option>
    <option value="Frau"></option>
</datalist>

good: The datalist shown for selection is complete

bad : The input field is empty, therefore the old value is not documented, if needed to be remembered by the user

you can use autocomplete="new-password". autocomplete = "off" didn't worked in my case.

<input name="q" type="text" autocomplete="new-password"/>

Try this, I hope it works.

<input id="datalisttestinput" list="stuff" autocomplete="off"></input>
<datalist id="stuff">
     <option id="1" value="Amy">
     <option id="2" value="Kristal">
     <option id="3" value="Collin">
     <option id="4" value="Carl">
</datalist>

try this:

<datalist id="datalist_id">

js:

dataList = $("#datalist_id")
dataList.empty()

This will clear the datalist's history. This worked for me on chrome. Then if you want to add options to the list, try:

dataList.append("<option>Some Option</option>")

Cheers !!!