45

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.

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
Yousuf Memon
  • 4,638
  • 12
  • 41
  • 57
  • I'm also having this problem. Seems like an oversight not to include a way to disambiguate between these two. – ajbraus Nov 20 '18 at 16:54
  • 1
    I didn't meet the issue of blocking `datalist`. Checked under Firefox 63.0.3 and Chromium 70.0.3538.110. Everything works as expected with `autocomplete="off"` – pt12lol Dec 10 '18 at 11:01

6 Answers6

23

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.

thetoast
  • 763
  • 4
  • 9
  • Ah, good suggestion. In fact, I just realized I actually solved the same problem on my own question by using an `` and leaving out the name on the real input. I keep them in sync with a simple piece of jquery: http://stackoverflow.com/questions/29756791/html-datalist-with-fallback-causes-duplicate-query-string-parameters – Stephan Muller Apr 23 '15 at 20:19
  • @StephanMuller yup, that's exactly what I was thinking! – thetoast Apr 23 '15 at 20:22
  • Interesting suggestion, can someone confirm if the same works for Chrome as well? I presume even chrome remembers history based on ID? – Raj Pawan Gumdal Apr 20 '16 at 15:17
  • Tested in Chrome and it works as advertised. However, my HTML is generated from JSP and I can't avoid using "name" attribute since it is needed for mapping. Any other solutions? – Raj Pawan Gumdal Apr 20 '16 at 19:41
  • 5
    In the latest versions of Firefox (50) and Chrome (55), using `autocomplete="off"` on the `input` has the expected behavior: it disables the history but shows the `datalist` options. – Laurent VB Jan 09 '17 at 13:52
15

Try using the HTML attribute autocomplete

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

source Turn Off Autocomplete for Input

Ananda
  • 888
  • 9
  • 19
  • Thanks! That'll teach me to read the docs first: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input – jmathew Jun 29 '16 at 16:36
  • 3
    The op did say that they used `autocomplete` attribute. – Sơn Trần-Nguyễn Sep 02 '17 at 20:09
  • The issue arise in combination with datalist... After you've submited the form, it remembers datalist value previously selected, though autocomplete is "off". I just faced it now under firefox 62.0.3 – Salathiel Genese Oct 06 '18 at 02:10
  • I found that in Chrome, it was still suggesting wrong things at the bottom depending on the name of the input and/or datalist. Ex. field name medNames showed a few of my name combinations at the bottom. By using the datalist id for the autocomplete value prevented that. – WebDude0482 Nov 06 '19 at 15:21
  • Easiest and best solution. I did not face the problem that OP did; connect input with `list = "datlistID"`. (I also use placeholder for old value) – Sondre May 14 '20 at 00:45
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

Andrea
  • 11,801
  • 17
  • 65
  • 72
Ulrich Berth
  • 183
  • 1
  • 4
  • 1
    If you want to remember the input value for the user, put the value also in the placeholder="value" - so it's a little help for the user ;-) – adilbo Jun 13 '18 at 09:53
3

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

<input name="q" type="text" autocomplete="new-password"/>
akshayjain97
  • 39
  • 1
  • This was the best answer as it only shows the actual datalist options AND that which has been typed in that before. But, I was using the name/id of the datalist for the autocomplete value. Not sure where new password came from – WebDude0482 Nov 06 '19 at 15:20
1

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>
Arun J
  • 687
  • 4
  • 14
  • 27
Kumar Shanmugam
  • 597
  • 1
  • 11
  • 40
-1

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

nwillo
  • 1,204
  • 9
  • 9