DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Select Box - Search and Editing

Set the searchEnabled property to true to allow users to search.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

The following properties help you configure the feature:

  • searchExpr
    Specifies one or several data fields to search.
  • searchMode
    Specifies whether found items should contain the typed-in string or start with it.
  • searchTimeout
    Specifies the delay between the moment a user stops typing and the moment the search is executed.
  • minSearchLength
    Specifies the minimum number of characters that a user should type in to trigger the search.
  • showDataBeforeSearch
    Specifies whether the SelectBox should display the unfiltered item list until a user have typed in the minimum number of characters (minSearchLength).

Set the acceptCustomValue property to true to allow users to add values to the SelectBox. You should also implement the onCustomItemCreating handler to create new data source entries.