Question

我正在将material-ui / autoComplete与reactjs一起使用。在单个区域中搜索。如何使其搜索多个域。

所以我也想添加customerSurname字段。

在customerName字段上搜索。如何搜索CustomerSurname和customerIdentityNo字段？

 <Autocomplete
      id={'customer-search'}
      options={this.state.customerItems}
      getOptionLabel={(option) => option.customerName}
      renderOption={(option) => (
        <React.Fragment>
          <span> {option.customerIdentityNo}, </span>
          <span> {option.customerName} {option.customerSurname} </span>
        </React.Fragment>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search input"
          margin="normal"
          variant="outlined"
          InputProps={{
            ...params.InputProps,
            type: 'search'
          }}
        />
      )}
    />

Answer 1

Ciao，要组合使用选项，我发现的唯一方法是在options中创建一个包含所有所需值的数组。像这样：

<Autocomplete
      id={'customer-search'}
      options={this.state.customerItems.map((option) => return option.customerIdentityNo + "," + option.customerName + "," option.customerSurname)}
      getOptionLabel={(option) => option.customerName}
      renderOption={(option) => (
        <React.Fragment>
          <span> {option.split(",")[0]}, </span>
          <span> {option.split(",")[1]} {option.split(",")[2]} </span>
        </React.Fragment>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search input"
          margin="normal"
          variant="outlined"
          InputProps={{
            ...params.InputProps,
            type: 'search'
          }}
        />
      )}
    />

通过这种方式，您可以将选项创建为字符串。然后在renderOption上，您可以拆分此字符串并以自定义方式显示元素。

Answer 2

您可以使用fuse.js之类的库对集合中的任何字段执行搜索。他们有一个demo page，您可以在这里试用。

但是，您必须弄清楚如何与您使用的自动完成库集成。

使用material-ui自动完成功能搜索多个域

2 个答案: