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.
So what's the difference between the autocomplete attribute and datalists? The autocomplete attribute tells the browser whether to give a user options for completion based on previous input and whether to store the entered value for future completion.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Like select elements, the datalist element has very little flexibility in styling. You cannot style any of the suggested terms if that's what your question was asking. Browsers define their own styles for these elements.
To get rid of unwanted autofill suggestions in Chrome, highlight the suggestion you want to clear by hovering your mouse over it, then press the "shift" and "delete" keys at the same time.
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.
Try using the HTML attribute autocomplete
<input name="q" type="text" autocomplete="off"/>
source Turn Off Autocomplete for Input
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With