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

Question

我有一个input字段，显示使用html5 <datalist>元素的列表。问题是，使用<datalist>，浏览器自动完成也会显示历史列表（这是以前键入的值列表，不包含在<datalist>中）。所以我只想摆脱history-list而不是<datalist>。

如果我使用autocomplete = "off"功能，这也会阻止<datalist>。

简而言之，我只想要<datalist>而不是历史。

Answer 1

您是否可以在没有input或id属性的情况下使用name字段？没有它，浏览器实际上没有办法将历史与该元素相关联。

在我对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>

在上面的代码中，input与id或name会记住过去的值，但没有任何东西的input和只有class的输入将不记得任何东西。

不幸的是，如果你需要它有input或name，这确实使得使用id稍微困难一些。在那种情况下，我会尝试使用id'ed input，这也是display: none'ed然后使用一些JavaScript来保持它与一个不记得过去的值的input同步。

Answer 2

我使用这样的代码：

<input name="anrede" list="anrede" onmousedown="value = '';" />
<datalist id="anrede">
    <option value="Herr"></option>
    <option value="Frau"></option>
</datalist>

good：显示选择的datalist已完成

bad：输入字段为空，因此如果需要用户记住，则不记录旧值

Answer 3

尝试使用HTML属性自动完成功能

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

来源Turn Off Autocomplete for Input

Answer 4

试试这个：

<datalist id="datalist_id">

JS：

dataList = $("#datalist_id")
dataList.empty()

这将清除数据主义者的历史。这对我有用铬。然后，如果要向列表中添加选项，请尝试：

dataList.append("<option>Some Option</option>")

干杯!!!

Answer 5

试试这个，我希望它的工作

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

最好的祝愿