React Material-UI Cookbook

How to do it...

You'll want to use two functions from the autosuggest-highlight package to help highlight the text presented in the autocomplete dropdown, as follows:

import match from 'autosuggest-highlight/match';import parse from 'autosuggest-highlight/parse';

Now, you can build a new component that will render the item text, highlighting as and when necessary, as follows:

const ValueLabel = ({ label, search }) => {  const matches = match(label, search);  const parts = parse(label, matches);  return parts.map((part, index) =>    part.highlight ? (      <span key={index} style={{ fontWeight: 500 }}>        {part.text}      </span>    ) : (      <span key={index}>{part.text}</span>    )  );};

The end result is that ValueLabel renders an array of span elements, determined ...