Search multiple domains with material-ui autocomplete

Question

I'm using material-ui / autoComplete with reactjs. Searching in a single area. How do I make it search multiple domains.

So I want to add the customerSurname field as well.

Searching on the customerName field. How can I search the CustomerSurname and customerIdentityNo fields?

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

To have combined options, the only way I found is create an array of all values you want in options. Something like:

<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'
          }}
        />
      )}
    />

In this way you are creating an option as a string. Then on renderOption you could split this string and show element in custom way.

Answer 2

You could use a library like fuse.js to perform searching on any fields that are in your collection. They have a demo page where you can try it out.

You would however have to figure out how to integrate with the autocomplete library you are using.