时间戳

首页 > 解决方案 > 如何根据用户输入将搜索建议部分加粗？

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

问题描述

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

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

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

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

因此，建议应显示为Pa paya 和Pa w Paw。

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

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

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

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

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

标签： javascriptarraysreactjssearchreplace

解决方案

您可以使用危险的SetInnerHTML。

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

代替：

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

您可以使用：

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

推荐阅读