当我选择输入时，如何获取未过滤的数据列表？

Question

我有输入，当我输入数字时会显示一些值。 我想做的是显示所有datalist ，当我尝试尝试选择时。 我找到了答案 ，但它是用jquery编写的。

无论我输入什么内容，如何显示所有选项？

<span>
    <input
      type="number"
      list="values"
      value={this.state.values}
      onChange={this.valuesHandler}
    />
    <datalist id="values">
      <option value="200" />
      <option value="250" />
      <option value="300" />
      <option value="350" />
      <option value="500" />
    </datalist>
  </span>

onChange

  valuesHandler(e) {
    this.setState({ values: +e.target.value })
    this.forceUpdateHandler()
  }

现在看起来像

但无论如何，它看起来应该像这样

Answer 1

不幸的是（从今天开始）无法使用css控制datalist options的显示。

datalist创建是为了在您键入时过滤输入。

如果需要更灵活的工具，我建议使用不同的元素创建自己的自动完成或下拉组件。

像react-select https://jedwatson.github.io/react-select/之类的东西也可能起作用。

有关数据列表的更多信息，请参见此处https://www.w3schools.com/tags/tag_datalist.asp