html - 和问题：只有一个在列表中查看，的初始值

Question

某些数据列表未正确查看。数据列表中只提出了输入的初始值。我的错在哪里？

我使用 php 和来自亚马逊、谷歌和法国 BnF（国家图书馆）的数据生成一些数据列表，以便用户可以选择适当的信息。它大部分时间都有效（95%）。但是我遇到了一些数据列表的问题。只查看一个选项，即输入的初始值。

代码 1：

  <input    id="author" name="item_author" value="Sophie de  Ségur"  onchange="javascript:submit();"    list="data_author">
  <datalist id="data_author">
    <option value="Comtesse de Ségur">Amazon</option>
    <option value="Comtesse de Ségur">BnF</option>
    <option value="Sophie Rostopchine de Ségur">Google</option>
    <option value="Sophie de  Ségur">BnF</option>
    <option value=" Bertall">BnF</option>
  </datalist>

结果代码 1：仅查看第四个选项（输入的初始值）。

示例 2：

  <input    id="author" name="item_author" value="Catherine  Ard"  onchange="javascript:submit();"  list="data_author">
  <datalist id="data_author">
    <option value="Mickael Wiles">Amazon</option>
    <option value="[textes par Catherine Ard]">BnF</option>
    <option value="Catherine  Ard">BnF</option>
  </datalist>

结果代码 2：仅查看最后一个选项（输入的初始值）

示例 3：

  <input    id="publisher" name="item_publisher" value="Gallimard jeunesse"  onchange="javascript:submit();"    list="data_publisher">
  <datalist id="data_publisher">
    <option value="Editions Gallimard">Amazon</option>
    <option value="Gallimard jeunesse">BnF</option>
  </datalist>

结果代码 3：仅查看最后一个选项（输入的初始值）

在所有 3 个示例中，当我单击输入右侧的箭头（在 chrome 上）时，我希望得到一个包含所有选项的菜单。但我只得到输入值的选项。

标签： htmlhtml-datalist

Answer 1

问题与“输入”的自动完成及其初始值有关，这是一种无法“关闭”的自动完成。

因此，在“onchange="javascript:submit();"” 的上下文中的解决方案是使用 2 个“输入”。

第一个带有数据列表的“输入”，value="" 和 onmousedown="value = '';" 在短宽度“输入”中。

具有初始值的第二个“输入”。

NB1：根据“表单”上下文，您可以为两个“输入”使用两个不同的“名称”（并在 PHP 或 JS 中处理它们）。

NB2：宽度限制的原因（更好和更小的MMI），我更喜欢带有数据列表的“输入”而不是“选择”。

示例 1 的解决方案：

  <input    id="author" name="item_author" onchange="javascript:submit();"  list="data_author" onmousedown="value = '';" style="width:5vmin;">
  <datalist id="data_author">
    <option value="Comtesse de Ségur">Amazon</option>
    <option value="Comtesse de Ségur">BnF</option>
    <option value="Sophie Rostopchine de Ségur">Google</option>
    <option value="Sophie de  Ségur">BnF</option>
    <option value=" Bertall">BnF</option>
  </datalist>
  <input    id="author" name="item_author" value="Sophie de  Ségur"  onchange="javascript:submit();">

谢谢：

• Bryan Dellinger：https ://stackoverflow.com/users/2744722/bryan-dellinger 提出他的建议；
• 分析：如何在 html 中继续使用 datalist 元素的同时关闭自动完成功能；
• “二进制”j08691：https ://stackoverflow.com/users/616443/j08691 （以纪念我在 80 年代的“Sharp PC 1245”的二进制逆向工程）。