React-Select v2 comma separated search

user_6826746 0
Viewed 2048

Is there a way with react-select v2 to search for multiple values at once? Like I could have my user paste in a list of comma or space separated values and items matching those results would display in the dropdown.

Example react-select (we call them item pickers):

<StyledFormItemPicker
          className="emailPicker"
          filterKeys={['label']}
          label="email picker"
          value={emailPickerValue}
          onChange={value => onEmailPickerChange(value)}
          items={users}
          isMulti={true}
        />

onChange code:

// allow user to pass in comma separated list to search
export const onEmailPickerChange = props => event => {
  event.persist();
  // split event (value) on space or comma
  // push to an array
  // set that array of strings as the value and see all results?
};
react-select reactjs multi-select javascript
1 Answers

So in order to achieve your feature I would use the props filterOption.

const filterOption = ({ label, value }, string) => {
  if(string === "") return true;

  const parsedString = string.split(/[, ]+/);
  for (const string of parsedString) {
    // Need to check of string is not empty after the split
    if (string !== "" && (label.includes(string) || value.includes(string)))
      return true;
  } 
  return false;
};

The idea is to split the input value by either space or comma (in the example above I did the combination of those two options) and to apply the regular filtering react-select is doing on each instance.

Live example available here.

user_95928440
Related