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

Question

I've got input, that shows some values when i type number. That i wanna do is show all datalist , when i try try select. I found answer , but it is written in jquery.

How to show all option no matter what i'm input?

<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()
  }

Now it looks like that

But it should look like that on any value

Answer 1

Unfortunately (as of today) it is not possible to control the display of datalist options with css.

datalist was created to filter on the input as you type.

I would recommend creating your own autocomplete or dropdown component using different elements if you need something more flexible.

Something like react-select https://jedwatson.github.io/react-select/ might work as well.

More info on datalist here https://www.w3schools.com/tags/tag_datalist.asp