各位大佬好，我最近在尝试用HTML5原生的<datalist>替换项目里的Awesomplete组件，结果在Rails表单里遇到了一个奇怪的问题，实在搞不懂哪里出问题了，来求助一下！

先说说我的情况：

• 我用Rails的partial生成了<datalist>，代码是这样的：

  <%= tag.datalist( options_for_select(Client.order(:city).distinct.pluck(:city).take(10)), id: "client-cities-list") %>
  

  这段代码生成的HTML完全符合预期，输出的选项列表是正常的：

  <datalist id="client-cities-list">
    <option value=""></option>
    <option value="Albany">Albany</option>
    <option value="Astoria">Astoria</option>
    <option value="Auburn">Auburn</option>
    <option value="Bayonne">Bayonne</option>
    <option value="Bellvue">Bellvue</option>
    <option value="Bethlehem">Bethlehem</option>
    <option value="Binghamton">Binghamton</option>
    <option value="boston">boston</option>
    <option value="Bronx">Bronx</option>
  </datalist>
  

  补充一下：city只是Client模型里的一个普通文本字段，不是关联表或者其他特殊字段。

• 我做了个测试，如果直接在表单里硬写HTML的input标签：

  <input list="client-cities-list" id="ice-man-choice" name="ice-man-choice" type="text">
  

  这个输入框完全正常！比如我输入"Albany"的时候，所有以A开头的城市选项都会自动弹出来，完全符合预期。

• 但当我用Rails的表单辅助方法生成对应的input时：

  <%= f.text_field :city, list: "client-cities-list" %>
  

  它生成的HTML看起来和硬写的几乎一样，只是id和name是Rails自动生成的：

  <input list="client-cities-list" type="text" name="client[city]" id="client_city">
  

  问题来了：这个输入框完全没有下拉提示的效果，就是个普通的文本框，完全不触发datalist的功能。

我已经排查了这些点：

• 检查了JavaScript，两个输入框都没有绑定任何事件；
• 操作两个输入框时，控制台里没有任何报错或者异常信息；
• 我暂时不关心表单提交的问题，只纠结为什么datalist没生效。

实在想不通哪里错了，感觉自己肯定犯了个低级错误，求各位指点一下！

内容来源于stack exchange