how to highlight or bold the searched text in the options?

[omerbarda130]

i want when the dropdown menu is open the be able to highlight the text i searched in the options
if i search the text :"ba" the options needs to be Bangladeshi Batswana etc

[manjushsh]

Hi @omerbarda130
Please refer first Select in example below.
Working example Sandbox

import { useState } from "react";
import Select, { components } from "react-select";

const HighlightSearched = ({ options }) => {
  const [selected, setSelected] = useState(null);

  const handleChange = (selectedOption) => {
    const [selected] = options?.filter((o) => o?.value === selectedOption);
    setSelected(selected || options[0]);
  };

  const filterOption = (option, inputValue) => {
    // const { label, value } = option;
    // const otherKey = options.filter(
    //   (opt) => opt.label === label && opt.value.includes(inputValue)
    // );
    // return value.includes(inputValue) || otherKey.length > 0;
    return options;
  };

  return (
    <>
      <h2>Highlight Searched</h2>
      <Select
        value={selected}
        options={options}
        placeholder="Select an option!"
        filterOption={filterOption}
        onChange={(newValue) => handleChange(newValue?.value)}
        components={{ Option }}
      />
    </>
  );
};
export default HighlightSearched;

// Custom components for highlight on search
const Option = (props) => {
  const userInput = props?.selectProps?.inputValue || "";
  return (
    <components.Option {...props}>
      <div>
        {props?.selectProps?.inputValue?.length
          ? props?.data?.label?.split(" ").length
            ? props?.data?.label
                ?.split(" ")
                .map((word: string) =>
                  word
                    .split("")
                    .map((w) => (userInput.includes(w) ? <b style={{color: "red"}}>{w}</b> : w))
                )
            : props?.data?.label
          : props?.data?.label}
      </div>
    </components.Option>
  );
};

Hope it helps.

[YBFJ]

thanks a lot

[Raz-Danielyan]

the search is working but it will not show the spaces in the option if you split by space.

[Raz-Danielyan]

Something like this works perfectly for my project.

const renderLabel = (item, searchString) => {
  const splitRegex = new RegExp(searchString, 'gi');
  return (
    <>
      {searchString?.length && item?.split(splitRegex)?.length > 0
        ? item?.split(splitRegex).map((word, index) => {
            return index > 0 ? (
              <span>
                <span style={{ color: '#7854FF', fontWeight: 700 }}>
                  {item.match(splitRegex)?.[0] || ''}
                </span>
                {word}
              </span>
            ) : (
              word
            );
          })
        : item}
    </>
  );
};

[afraser]

Worth noting that new RegExp(searchString, 'gi'); will blow up if the user enters any special regex characters such as '['

[vivekneupane11]

Here's what I am using in 2024. works great
https://www.npmjs.com/package/reactjs-editor

https://reactjs-editor-demo.vercel.app/

[vivekneupane11]

Just select a text and make it work.
There's a demo you can check

[afraser]

This approach handles case insensitive matching and works for input strings that include characters that would blow up regular expressions.

const makeBold = (item: string, keyword: string) => {
  const lowerCasedInputValue = keyword.toLowerCase()
  const hitIndex = item.toLocaleLowerCase().indexOf(lowerCasedInputValue)
  if (hitIndex === -1) return item
  const before = item.slice(0, hitIndex)
  const match = item.slice(hitIndex, hitIndex + keyword.length)
  const after = item.slice(hitIndex + keyword.length)
  return (
    <span>
      {before}
      <b>{match}</b>
      {after}
    </span>
  )
}

[Appolinars]

Works just great. Thank you. If someone interested here is my full component with this helper-function:

import { components, OptionProps } from 'react-select';

const { Option } = components;

const highlightInputMatch = (item: string | undefined, keyword: string) => {
  if (!item || !keyword) return item;
  const lowerCasedInputValue = keyword.toLowerCase();
  const hitIndex = item.toLocaleLowerCase().indexOf(lowerCasedInputValue);
  if (hitIndex === -1) return item;
  const before = item.slice(0, hitIndex);
  const match = item.slice(hitIndex, hitIndex + keyword.length);
  const after = item.slice(hitIndex + keyword.length);
  return (
    <span>
      {before}
      <b>{match}</b>
      {after}
    </span>
  );
};

const SearchAutocompleteOption = (props: OptionProps) => {
  const inputValue = props.selectProps.inputValue;

  return (
    <Option {...props}>
        {highlightInputMatch(data.label, inputValue)}
    </Option>
  );
};

<Select
   className={className}
   inputValue={searchInput}
   onInputChange={(value, action) => {
     if (action.action === 'input-change') onInputChange(value);
    }}
   value={searchValue}
   handleChange={handleOptionSelect}
   isLoading={isLoading}
   loadingMessage={() => <Loader />}
   options={optionsToRender}
   isClearable
   instanceId={useId()}
   components={{ DropdownIndicator: null, Option: SearchAutocompleteOption }}
   onFocus={onFocus}
   onBlur={onBlur}
   />