如何在继续使用 html 中的 datalist 元素的同时关闭自动完成功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15927182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to turn off autocomplete while keep using datalist element in html
提问by Yousuf Memon
I have a inputfield 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-listnot the <datalist>.
我有一个input使用 html5<datalist>元素显示列表的字段。问题在于，<datalist>浏览器自动完成还会显示历史列表（这是以前键入的值的列表，未包含在 中<datalist>）。所以我只想摆脱history-listnot the <datalist>。
If I use the autocomplete = "off"feature, this also blocks the <datalist>.
如果我使用该autocomplete = "off"功能，这也会阻止<datalist>.
In short, I just want the <datalist>not the history one.
简而言之，我只想要不是<datalist>历史的。
回答by thetoast
Is it possible for you to use the inputfield without an idor nameattribute? Without that, the browser doesn't really have any way to associate a history with that element.
您可以使用input没有idorname属性的字段吗？没有它，浏览器实际上没有任何方法将历史记录与该元素相关联。
In my real quicktesting on Firefox, this seemed to do the trick:
在我对 Firefox 的真正快速测试中，这似乎可以解决问题：
<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 idor namewould remember past values, but the inputwithout anything and the input with just a classwould notremember anything.
在上面的代码中，input以Sid或name会记得过去的数值，但input没有任何东西，只需输入class将不会记得任何事情。
Unfortunately, this does make using the inputslightly more difficult if you needit to have a nameor id. In that case, I'd try having an id'ed inputwhich is also display: none'ed and then use some JavaScript to keep it in sync with an inputthat won't remember past values.
不幸的是，input如果您需要它有一个name或id. 在这种情况下，我会尝试使用一个id'ed input，它也是display: none'ed，然后使用一些 JavaScript 使其与input不记得过去值的同步。
回答by Ananda
Try using the HTML attribute autocomplete
尝试使用 HTML 属性自动完成
<input name="q" type="text" autocomplete="off"/>
source Turn Off Autocomplete for Input
source关闭输入的自动完成功能
回答by Ulrich Berth
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
bad：输入字段为空，因此旧值未记录，如果需要用户记住
回答by akshayjain97
you can use autocomplete="new-password". autocomplete = "off" didn't worked in my case.
您可以使用自动完成=“新密码”。autocomplete = "off" 在我的情况下不起作用。
<input name="q" type="text" autocomplete="new-password"/>
回答by nwillo
try this:
尝试这个：
<datalist id="datalist_id">
js:
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:
这将清除数据列表的历史记录。这在 chrome 上对我有用。然后，如果您想向列表中添加选项，请尝试：
dataList.append("<option>Some Option</option>")
Cheers !!!
干杯！！！
回答by Kumar Shanmugam
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
最好的祝愿
