ReactJS – Material UI Automatically completes from remote DataSource in the React application

import React from'react';

import SomeService from'../../../services/SomeService';

import AutoComplete from'material-ui/AutoComplete';

class SearchInput extends React.Component {
 constructor (props) {
 super(props);
 
 this.state = {
 dataSource: []
 };
 }
 
 searchSomething (value) {
 if (value.length) {< br /> SomeService.fetchAutocomplete({searchQuery: value})
 .then((res) => this.handleSuccess(res.data),
 (err) => this.handleFailure(err)) ;
} else {
 this.setState({
 dataSource: []
 });
 }
 };
 handleSuccess (response ) {
 this.setState({dataSource: response.slice(0, 10)});
 }
 handleFailure (err) {
 console.log(err);< br /> }
 
 re nder () {
 return (
 

  floatingLabelText='Enter test'
 dataSource={this.state.dataSource}
 onUpdateInput={(val) => this.searchSomething(val)}
 fullWidth={true} />
 

 );
 }
} 

export default SearchInput;

reponse: {
 ....,
 data: ['Apple','Banana','Orange '],
 ....
}

 floatingLabelText='Enter test'
 dataSource={this.state.dataSource}
 onUpdateInput= {(val) => this.searchSomething(val)}
 fullWidth={true} 
 filter={(searchText, key) => true} />

I am using React 15.0.1 and Material-UI 0.15.0. I am trying to render automatically through React. This is my code:

< pre>import React from’react’;

import SomeService from’../../../services/SomeService’;

import AutoComplete from’material-ui /AutoComplete’;

class SearchInput extends React.Component {
constructor (props) {
super(props);

this.state = {
dataSource: []
};
}

searchSomething (value) {
if (value.length) {
SomeService.fetchAutocomplete ({searchQuery: value})
.then((res) => this.handleSuccess(res.data),
(err) => this.handleFailure(err));
} else {
this.setState({
dataSource: []
});
}
};
handleSuccess (response) {
this.setState({dataSource: response.slice(0, 10)}) ;
}
handleFailure (err) {
console.log(err);
}

render () {
return (< br />

);
}
}

export default SearchInput ;

Suppose I get a response object containing data: […] //A bunch of things.
This is not presented.

The response object is similar to:

reponse: {
 ....,
 data: ['Apple','Banana','Orange'],
 .... 
}

Can anyone help me?

According to this question and the comment mentioned, you only need to pass true to skip the filter function.

 floatingLabelText='Enter test'
 dataSource={this.state.dataSource}
 onUpdateInput={(val) => this.searchSomething(val) }
 fullWidth={true} 
 filter={(searchText, key) => true} />