Semantic UI React - populate dropdown with remote content

Question

I am trying to implement a searchable dropdown (using Semantic UI React library) that is populated by matching results from the server. The user is presented with with an input box. As soon as they start typing a few characters, a request is made to a backend restful endpoint which returns matching search results. These results are displayed as values in the dropdown.

This was quite easy with plain Semantic UI (explained at https://semantic-ui.com/modules/dropdown.html#match-search-query-on-server).

But how can I achieve this with the React version of the library?

I can't figure out from the documentation (https://react.semantic-ui.com/modules/dropdown/#usage-remote).

Can someone provide me with an example?

sha35868 · Accepted Answer · 2018-11-01 19:14:47Z

6

I was able to code it as follows:

class MyDd extends React.Component {
  state = {options: []}

  onSearchChange = (e, value) => {
    axios.get(`/api/match?query=${value.searchQuery}`)
     .then((response) => {
       this.setState({options: response.data})
    })

  }

  render() {
    return (
      <Dropdown
        onSearchChange={this.onSearchChange}
        search
        selection
        options={this.state.options}
      />
    )
  }
}

answered Nov 1, 2018 at 19:14

sha35868

1591 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sra Over a year ago

I also needed to set search in the Dropdown to identity (options => options) as it otherwise tried to filter my options based on their text property.

Collectives™ on Stack Overflow

Semantic UI React - populate dropdown with remote content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related