如何根据用户的输入使搜索建议的部分粗体化？

Question

我一直在努力想出一个搜索建议。搜索建议将显示为用户类型。

您可以在链接- https://codesandbox.io/s/heuristic-shaw-rqp2k?file=/src/Autocomplete.js上找到代码。

我想要实现的是，出现的建议必须有一个黑体部分，用户键入。

示例-当用户在输入字段中输入"pa“时，我们得到两个建议:番木瓜和爪爪。

因此，这一建议应作为Papaya和Paw Paw。

我一直在尝试用替换的方法来达到这个目的，方法如下-

let optionName = optionName.replace(userInput,'<b>'+userInput+'</b>')

这段代码不工作，这是代码框链接上的第66行。

不使用替换方法的任何其他解决方案也是受欢迎的。

如果你还需要更多的信息，请告诉我。

Answer 1

下面的代码成功了。请查收。

<li className={className} key={optionName} onClick={onClick}>
                {_getStyledSuggestion(optionName)}
</li>

const _getStyledSuggestion = (suggestion) => {
    if(!suggestion.toLowerCase().startsWith(userInput)) {
      return <span>{suggestion}</span>;
    }
    const userInputLength = userInput.length;
    return(
      <span>
        <span className="bold-span">{suggestion.substring(0, userInputLength)}</span>
        {suggestion.substring(userInputLength)}
      </span>
    );
  }

CSS：

.bold-span {
  font-weight: 700;
}

链接：https://codesandbox.io/s/angry-sea-97k4w?file=/src/Autocomplete.js:1495-1898

Answer 2

您可以使用dangerouslySetInnerHTML。

dangerouslySetInnerHTML取代了在浏览器DOM中使用innerHTML

而不是：

  <li className={className} key={optionName} onClick={onClick}>
            {optionString}
  </li>

您可以使用：

<li className={className} key={optionName} onClick={onClick}>
                <span dangerouslySetInnerHTML={{__html: optionString}}  />
</li>