How to custom react-select set searching filter

user_9750874 0
Viewed 1791
const ItemOptions: SelectValueInterface[] = Item.map((e) => ({
 value: e.ItemId,
 label: `${e.ItemName} (Item ID : ${e.ItemId})`,
}));
const options = [
 {
   label: 'ITEM NAME (Item ID)',
   options: ItemOptions,
 },
];

const formatGroupLabel = (data: any) => (
 <div className={styles.formatGroupLabel}>
   <span>{data.label}</span>
 </div>
);

<Select
 placeholder="Select Name"
 options={options}
 formatGroupLabel={formatGroupLabel}
 classNamePrefix="select-list"
 value={ItemOptions.filter((option) => option.value === selectedItemId)}
 onChange={filterByItemID}
/>;

when on typing on searching/sorting. when i'm type "Item ID" it's show all options i would'like to not detect "(Item ID: number)"

react-select
2 Answers

You can, by providing a filterOption prop. The method you provide takes two arguments: input, which is the search, and candidate, an object of {label, value, data}. The label matches the return of your getOptionLabel (if you used a key other than label). The value matches the return of your getOptionValue (if you used a key other than value). The data is the full 'option' object you provided in your options.

// a filter function that runs against each 'option' in `options`
const customFilter = useCallback((candidate, input) => {
  if (input) {
    // return true for each option that matches your filter
  }
  return true; // if not search, then all match
}, []);
// ...
<Select filterOption={customFilter} ...
user_634370

Here is how I customized my DropDown filter using this prop - filterOption={customFilter}:

import React, { Component, useState } from "react";
import Select from "react-select";
import DropDownOptions from "./DropDownOptions";
import DropDownValueContainer from "./DropDownValueContainer";
import "./DropDown.less";

const DropDown = () => {
  const options = [
    { value: "value1", label: "Header1" },
    { value: "value2", label: "Header2" },
    { value: "value3", label: "Header3" },
  ];
  const [selectedValue, setSelectedValue] = useState({});
  const handleChange = (selectedOption) => {
    setSelectedValue(selectedOption);
  };

  const colourStyles = {
    valueContainer: (base, state) => ({
      ...base,
      backgroundColor: state.isSelected ? "red" : "white",
    }),
    input: (base, state) => ({
      ...base,
      display: state.selectProps.menuIsOpen ? "block" : "none,"
    })
  };

  //Add your search logic here.
  const customFilter = (option, searchText) => {
    if (
      option.data.label.toLowerCase().includes(searchText.toLowerCase()) ||
      option.data.value.toLowerCase().includes(searchText.toLowerCase())
    ) {
      return true;
    } else {
      return false;
    }
  };

  return (
    <Select
      placeholder="Select Value"
      options={options}
      defaultValue={options[0]}
      onChange={handleChange}
      components={{
        Option: DropDownOptions,
        ValueContainer: DropDownValueContainer,
      }}
      isSearchable={true}
      styles={colourStyles}
      filterOption={customFilter}
      classNamePrefix="dropdownStyles"
    />
  );
};

export default DropDown;

Go through this post to unserstand the code

user_72668350
Related