当我选择输入时，如何获得未过滤的datalist？

Question

我有输入，当我输入数字时会显示一些值。我想做的是显示所有datalist，当我尝试尝试选择。我找到了answer，但它是用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/这样的东西可能也会起作用。

有关datalist的更多信息，请访问https://www.w3schools.com/tags/tag_datalist.asp