小编cri*_*aas的帖子

我有一个带有类似于 Google 搜索栏的 React.js 应用程序。用户可以在输入字段中输入一些文本，匹配的数据被提取并显示在输入下方的下拉菜单中。

我的问题：我想将下拉列表中显示的某些单词加粗 - 特别是用户自己没有在输入字段中输入的字符串中的单词。

因此，例如，如果用户在搜索栏中键入“blue”，则其下方将显示数据库中包含“blue”一词的所有数据，即“blue shoes”或“blue sky”。我希望未在搜索栏中输入的单词加粗 --> 天空或鞋子

我的 makeBold 函数不起作用，因为 a) 它在浏览器上显示为<b>blue</b> sky粗体，而不是实际粗体；b）它会加粗用户输入的关键字而不是其他单词）

**keyword由父组件传递给该组件，它包含用户在输入字段中写入的文本

**searchResults包含作为对象数组传递的获取的搜索结果列表

const SearchResults = ({ keyword, searchResults }) => {
  
   const showDropdown = () => {
    return searchResults.map((item) => {
      if (item.term.includes(keyword.toLowerCase())) {
        return (
          <div key={item.term}>
            <ul>
              <li className="input-fields search-results">
                {makeBold(item.searchterm)} ({item.nrResults})
              </li>
            </ul>
          </div>
        );
      }
    });
  };

  const makeBold = (input) => {
      var re = new …