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

Question

我在 reactjs 中使用 material-ui / autoComplete。 在单个区域中搜索。如何让它搜索多个域。

所以我也想添加 customerSurname 字段。

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

https://ibb.co/qMjNz1d

 <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

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

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

Answer 2

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 上，您可以拆分此字符串并以自定义方式显示元素。