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

Question

我一直在尝试在 React 中开发搜索建议。搜索建议将在用户键入时显示。

您可以在 link - https://codesandbox.io/s/heuristic-shaw-rqp2k?file=/src/Autocomplete.js

上找到代码

我想要实现的是出现的建议必须有用户输入的粗体部分。

示例 - 当用户在输入字段中键入“pa”时，我们会得到两个建议 - Papaya 和 Paw Paw

因此，建议应显示为 Papaya 和 Paw Paw。

我一直在尝试使用替换方法通过执行以下操作来实现这一点 -

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

这段代码不起作用，它是 codesandbox 上的第 66 行 link。

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

如果您需要更多信息，请告诉我。

Answer 1

你可以使用 dangerouslySetInnerHTML。

dangerouslySetInnerHTML 是 React 在浏览器中使用 innerHTML 的替代品 DOM

而不是：

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

您可以使用：

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

Answer 2

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

<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;
}

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

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

How to make the part of search suggestion bold based on the user input?

javascript

arrays

search

replace

reactjs