logo
down
shadow

Semantic UI React - populate dropdown with remote content


Semantic UI React - populate dropdown with remote content

By : Jamie
Date : November 21 2020, 07:01 PM
this one helps. 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. , I was able to code it as follows:
code :
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}
      />
    )
  }
}


Share : facebook icon twitter icon
Cannot populate dropdown from Javascript Semantic UI

Cannot populate dropdown from Javascript Semantic UI


By : Laura_Echis
Date : March 29 2020, 07:55 AM
How to populate json in a dropdown with Semantic UI

How to populate json in a dropdown with Semantic UI


By : userk
Date : March 29 2020, 07:55 AM
this will help One way you could do this is by mapping the Bird_Name fields as text, and assuming you want the ID as the value:
code :
const options = birds.map(({ ID, Bird_Name }) => ({ value: ID, text: Bird_Name }))
Dropdown onchange doesnt work : React+ Typescript+ semantic-ui-react

Dropdown onchange doesnt work : React+ Typescript+ semantic-ui-react


By : kathy
Date : March 29 2020, 07:55 AM
Semantic UI Dropdown in React: onChange triggered twice when <a href> is used as content

Semantic UI Dropdown in React: onChange triggered twice when <a href> is used as content


By : user3653265
Date : March 29 2020, 07:55 AM
this one helps. It looks like the component for some reason raises the selectOnBlur event/handler, which then sets the value to the first item in the dropdown. I've managed to get it working correctly once I set selectOnBlur field to false.
Fixed example: https://codesandbox.io/s/semantic-ui-example-z4g9j
semantic-ui dropdown with remote selection menu content: 'clear' and 'set exactly' remove placeholder

semantic-ui dropdown with remote selection menu content: 'clear' and 'set exactly' remove placeholder


By : NitishAcharya
Date : March 29 2020, 07:55 AM
may help you . There is currently something amiss with the Semantic UI source, where the refresh function removes the placeholder/default text data, at least when allowAdditions or remote data/API is used.
I found a fix until the Semantic UI devs fix it. https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/dropdown.js in line 390-392 - function refreshData, outcomment the following:
Related Posts Related Posts :
  • How to serve a React component library dependent on Styled Components to another library that also has a Styled Comopnen
  • Toggling font awesome Icon using React
  • How to this setState to set a value from function?
  • TypeScript and React - children type?
  • How to use Redux with React
  • How can I remove the bar in the react-select?
  • How can I store a img into a MongoDB?
  • ReactJS: setState using if else
  • React skip API request if data already exists
  • Reused React element prevents component updates
  • how to change default index page to login page in react js
  • Why does my React app append the external URL to http://localhost:/<port> and not to ONLY the URL itself?
  • How do I create a dockerized development environment for ReactJS
  • implementing force update with react native apps
  • React: avoid rendering component's root DOM element if DOM children are empty
  • Enzyme: Value props returns undefined in simulating onChange event
  • How to do Refresh in React Native ScrollView with refreshControl?
  • createBottomTabNavigator keep stackes mounted
  • Why am I unable to access a Redux store in a child React component?
  • Possible to do a callback in setState like this in React?
  • use ownProps in mapDispatchToProp
  • How to style react-native-sectioned-multi-select?
  • Managing Multiple States React
  • How to set focus after React state update/render
  • What is difference between reactstrap and react-bootstrap?
  • detect the uniqueness of the usernames with Firebase and react js
  • How "history" object is getting evaluated in React
  • Why is React Router not changing views on URL change?
  • How to use DRACOLoader with GLTFLoader in ReactJs?
  • How do I return a json file from s3 to a specific url, but only that url
  • Loading spinner with react useEffect hook and Redux and without useState hook
  • Jest - Could not locate module with dynamic import template string
  • Reactjs class components not rendered but functions are rendered in IE11
  • can i use the tsx extension for test files if using react with typescript
  • Material-ui: Difference between Expansion Panels and Collapse
  • When should I use a this.context vs Consumer in the New Context API in React?
  • Dynamic Component with React Router
  • How to inherit vanilla option component in a custom option component in react-select v2?
  • Is there a way to see the query produced by ReactiveSearch
  • How to describe type scroll events?
  • How to correctly mock React Navigation's getParam method using Jest
  • What is the better way to update other state variable which is dependent on another state variable while re-rendering?
  • Value of state variable is lost - React
  • How to compress the files using gzip in react app
  • Can we redirect to in reduxSaga
  • TypeError: Cannot read property 'map' of undefined (jest.js)
  • How to get state data from child to parent component?
  • Switching SubRoutes without unmounting MainRoute (React-Router-Dom)
  • Value must be set for boolean attributes with Typescript and Material UI
  • React + Firebase using hooks?
  • How to pass className style to sub component in `material-ui`?
  • How to create React hooks that forward dependencies
  • How to deploy React (NextJS) project with docker?
  • How to refetchQueries a query having an args option
  • How to fix "404" error when directly accessing a component in react
  • Cannot read property of undefined when using react hooks
  • React - Display message while binding data
  • React show/hide content
  • should I use shouldComponentupdate?
  • How to define a custom class to HighchartsReact component
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk