Algolia Autocomplete组件Highlight函数失效问题求助

components.Highlight默认依赖Algolia搜索引擎返回的_highlightResult字段——这个字段会包含预渲染好的高亮标记文本。你没使用Algolia搜索引擎，所以你的item数据里没有这个字段，自然无法触发高亮效果。

下面是两种可行的解决方案：

方案1：自定义高亮函数，手动生成标记 #

自己实现文本匹配逻辑，把搜索关键词对应的部分用HTML标签包裹，直接在模板中使用：

autocomplete({
  container: `#autocomplete`,
  placeholder: "Search",
  getSources() {
    return [
      {
        source: async ({ query }) => {
          // 替换成你的自定义数据获取逻辑
          const items = await fetchYourData(query);
          // 给每个item添加预处理后的高亮文本
          return items.map(item => ({
            ...item,
            highlightedName: highlightMatch(item.name, query)
          }));
        },
        templates: {
          item({ item, html }) {
            return html`<div>
              <img src="${item.image}" alt="${item.name}" />
              <div>
                ${item.highlightedName}
              </div>
            </div>`;
          },
        },
      },
    ];
  },
});

// 自定义高亮匹配函数
function highlightMatch(text, query) {
  if (!query.trim()) return text;
  // 大小写不敏感匹配
  const matchRegex = new RegExp(`(${query})`, 'gi');
  // 用mark标签包裹匹配内容，可自行替换成其他标签
  return text.replace(matchRegex, '<mark>$1</mark>');
}

别忘了给<mark>标签添加CSS样式，比如：

mark {
  background-color: #ffeb3b;
  padding: 0 2px;
}

方案2：模拟Algolia的_highlightResult结构 #

手动构建符合组件预期的字段结构，让components.Highlight能识别并渲染：

autocomplete({
  container: `#autocomplete`,
  placeholder: "Search",
  getSources() {
    return [
      {
        source: async ({ query }) => {
          const items = await fetchYourData(query);
          // 模拟Algolia的_highlightResult字段结构
          return items.map(item => ({
            ...item,
            _highlightResult: {
              name: {
                value: highlightMatch(item.name, query)
              }
            }
          }));
        },
        templates: {
          item({ item, components, html }) {
            return html`<div>
              <img src="${item.image}" alt="${item.name}" />
              <div>
                ${components.Highlight({ hit: item, attribute: 'name' })}
              </div>
            </div>`;
          },
        },
      },
    ];
  },
});

function highlightMatch(text, query) {
  if (!query.trim()) return text;
  const matchRegex = new RegExp(`(${query})`, 'gi');
  // 使用em标签，和Algolia默认高亮标记一致
  return text.replace(matchRegex, '<em>$1</em>');
}

内容的提问来源于stack exchange，提问作者Nastro