Материал Пользовательский интерфейс Автозаполнение не выполняется на удаленном источнике данных в приложении React

Question

Я использую React 15.0.1 и Material-UI 0.15.0. Я пытаюсь выполнить автозаполнение через React. Вот мой код:

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 (
 
     <div> 
 
     <AutoComplete 
 
      floatingLabelText='Enter test' 
 
      dataSource={this.state.dataSource} 
 
      onUpdateInput={(val) => this.searchSomething(val)} 
 
      fullWidth={true} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default SearchInput;

Предполагая, что я получаю объект ответа с данными: [...] // массив материала. Это не отображается.

Объект ответ что-то вроде:

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

Может кто-нибудь помочь мне?

Answer 1

Согласно сообщению this и упомянутому комментарию, вам просто нужно было пропустить функцию фильтра, передав true для всего.

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