Error with searching value in options

[chandra10207]

Error while searching a value in options

For eg.

If my options contain the label "Red face and eyes". while searching on the field, if user type "red face", an option with "Red face and eyes" appears. However, If the user input is "red eyes" then it shows no options.

Is there any option to search options by word or similar solution for my case?

My Code is,

const options = [
  { value: '0', label: 'Red face and eyes' },
  { value: '1', label: 'Dark red nose and lips' },
]

<Select
          name="symptoms-search"
          placeholder="Click here to search"
          value={this.state.query}
          components={animatedComponents}
          options={options}
          onChange={this.handleMultiChange}
          isMulti
          isSearchable
        />

Thank you.

[ebonow]

Greetings,

This page explains a bit more about the filterOption prop and createFilter method, but here would be a crude implementation to get you started.

  const filterOption = (option, input='') => {
    const label = option.label.toLowerCase();
    return input.toLowerCase().split().every(word => label.includes(word));
  }

<Select filterOptions={filterOption} ... />

Let me know if this helps and please close this issue if it does.

[chandra10207]

HI @ebonow,
I tried but still not working.

My Code.

 const filterOption = (option, input='') => {
    const label = option.label.toLowerCase();
    console.log("inside filter");
    return input.toLowerCase().split().every(word => label.includes(word));
  }

    return (
      
          <Select
          name="symptoms-search"
          placeholder="Click here to select symptoms"
          // value={this.state.querySymptoms}
          value={selected}
          // options={this.state.filterOptions}
          components={animatedComponents}
          options={options}
          onChange={this.handleMultiChange}
          isMulti
          isSearchable
          noOptionsMessage={inputValue => 'No symptoms found'}
          filterOptions={filterOption}
        />
      </div>
    );

[chandra10207]

Thanks guys.

This works for me.

#3067