Question

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

我用php和Amazon，Google和French 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上）时，我希望得到一个包含所有选项的菜单。但是我只能得到输入值的选项。

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为他的提议；
分析：How to turn off autocomplete while keep using datalist element in html;
“二进制” j08691：https://stackoverflow.com/users/616443/j08691（以纪念我80年代“ Sharp PC 1245”的二进制反向工程）。

Answer 2

扩展@Franck 的回答 - 他对导致仅出现一个选项的行为的初始值是完全正确的。

只是为此提供我的解决方案 - 在 focus 上，您可以获得值，将其设置为 placeholder 并清理该字段 - 因此它仍然可见，但 datalist 仅起作用很好。

使用 jQuery 就可以了；

my_input.focus(function(){
    var initial_value = $(this).val()
   $(this).val("")
   $(this).attr("placeholder", initial_value)
   ...
)}

<input />和<datalist>问题：列表中仅查看了一个<option>，<input />的初始值

2 个答案: