Question

我正在使用ReactJS和NodeJS。我想使用Matrial UI的Auto Complete，但我遇到了困难

所以，我有一个带有姓氏和电子邮件的字符串数组，如下所示：

for(let i= 0; i<response.data.length; i++){                                    
    tabAutocomplete.push(response.data[i].lastname + " " + response.data[i].email)                              
}

我有自动完成功能：

<AutoComplete
                floatingLabelText="Recherchez l'utilisateur"
                filter={AutoComplete.fuzzyFilter}             
                dataSource = {tabAutocomplete}
                maxSearchResults={5}
                onNewRequest = {this.onNewRequest}
    />

我想通过dataSourceConfig属性分隔姓氏和电子邮件，如下所示：

                dataSource = {tabAutocomplete}
                dataSourceConfig = { lastname: 'lastname', email: 'email'}
    />

如果可能，我该怎么做？谢谢

Answer 1

不确定您面临的问题。但是从我的代码中我理解的是，您希望在用户搜索时显示带有姓氏的下拉列表，并且您需要在下拉列表中列出的用户的电子邮件。如果这是您想要实现的目标，请查看下面的更新代码。

Datasourceconfig有两个键，即text和value。文本键是在下拉列表中显示其值，值键是用于获取所选项目的值。

constructor(props){
  super(props);
  this.handleUpdateInput = this.handleUpdateInput.bind(this);
}

const dataSourceConfig = {
  text: 'lastname',
  value: 'email',
};

for(let i= 0; i<response.data.length; i++){                                    
    tabAutocomplete.push({ lastname: response.data[i].lastname, email: response.data[i].email }) 
} 
handleUpdateInput(searchText, tabAutocomplete, params){
  console.log("SearchText value: ", searchText) //here you will get searched text
  console.log("tabAutocomplete: ", tabAutocomplete) // here you will get your tabAutocomplete object
  console.log("Params: ", params)
}

<AutoComplete
    floatingLabelText="Recherchez l'utilisateur"
    filter={AutoComplete.fuzzyFilter}             
    dataSource = {tabAutocomplete}
    dataSourceConfig={dataSourceConfig}
    maxSearchResults={5}
    onNewRequest = {this.onNewRequest}
    onUpdateInput={this.handleUpdateInput}
/>

使用自动完成材质UI

1 个答案: