如何在继续使用 html 中的 datalist 元素的同时关闭自动完成功能

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

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

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

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

Answer 5

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>

Answer 6

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