有没有办法让表单操作在输入的搜索查询部分或完全匹配 iOS/Webkit 上的任何输入数据列表条目时触发？

Question

我正在尝试为 React 应用程序构建搜索功能。我已将其实现简化为最小的可重现示例。我认为我遇到的问题可能是浏览器错误。

考虑以下 React 代码：

function ProblematicForm() {
  const action = async (formData) => {
    // assume this is "use server". I _must_ extract the data from formData.
    // useState cannot be used to coordinate the value between this action and the input!
    alert(formData.get('search'))
  }

  return (
    <form action={action}>
      <input list="search" name="search" type="search" />
      <button type="submit">Search</button>
      <datalist id="search">
        <option value="foo" />
        <option value="bar" />
        <option value="baz" />
      </datalist>
    </form>
  )
}

在 Safari (WebKit) 上，数据列表正确呈现：

并且 键入数据列表成员的部分或完全匹配，然后按 Enter 会触发表单操作。

现在在 iOS Chrome（也是 WebKit，撰写本文时的最新版本）上，输入部分或完整匹配，然后点击 iOS 键盘上的搜索按钮，不会触发表单操作。

的作用是从下拉框中选择（而不是输入！）数据列表条目，然后点击iOS键盘上的搜索：

请注意，当选择位于键盘上方的数据列表建议时，这会失败

，我认为这相当于从实现角度手动输入数据列表条目。 同样有效的方法是

输入与数据列表中任何内容都不匹配的内容

，然后点击 iOS 键盘上的搜索按钮。

所以这要么是：

iOS 特定的 WebKit 错误

1. 我错误配置了我的
<input>
2. 和

   <datalist>

   标签以禁止

   键入

   而不是选定的匹配项
我要问的是：

如果问题是 1.，是否有解决方法来解决此问题并保留合理的 HTML

<form>
1. 语义和可供性？如果问题是 2.，我该如何解决我的
<form>
2. ？
谢谢！

Answer 1

将输入类型设置为文本

<input type="text"></input>

如果上面的代码不起作用，您可以尝试获取返回按钮的键码

$('search_field').observe('keyup',function(e){
        if(e.keyCode === 13){
            NAME.search($('search_field'));
        }
    });