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.

Answer 2

Try using the HTML attribute autocomplete

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

source Turn Off Autocomplete for Input

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

Try this, I hope its work

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

Best wishes