设置默认值后，如何使浏览器显示所有数据列表选项？

Question

我有一个带有数据列表的 HTML 表单，其中的值是用 PHP 设置的，比如

<input list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

我希望用户看到数据列表中的选项，以及来自 PHP 的当前值。但是，“自动完成”操作会导致列表中与当前值不匹配（或以当前值开头）的值从列表中隐藏，例如 $val='apple' 。有什么办法可以避免这种情况，或者浏览器是否修复了这种行为？

原文由 Dave W 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<datalist> 使用自动完成功能，所以这是正常行为。

例如，如果您将输入值设置为“o”，您将在数据列表选项中看到 _橙色_。它从第一个字母开始检查单词。但是，如果您将输入值设置为“a”，那么您将根本看不到任何选项。

因此，如果您在输入中已经有值，那么除了该值（如果存在）之外，数据列表选项中不会显示任何内容。它的行为不像选择。

解决方法是像这样使用 jquery，例如：

 $('input').on('click', function() {
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val('apple');
  }
});

完整测试在这里： https ://jsfiddle.net/yw5wh4da/

或者您可以使用 <select> 。对我来说，在这种情况下这是更好的解决方案。

原文由 Jakob 发布，翻译遵循 CC BY-SA 4.0 许可协议