Algolia 自动完成不会使用静态源转到选定的 URL

Question

ANSWER GetItemURL 仅用于键盘交互。它不用于鼠标处理。鼠标处理由呈现的 HTML（来自模板）完成。最简单的方法是在您的模板中使用 a HREF，或将您带到另一个页面的 OnClick 处理程序！

——————————-

我已经复制了默认的 autocomplete code for static sources，完成和过滤器工作，getItemURL 被正确调用，但是点击 URL 没有改变。

我创建了一个沙盒，你可以看到它here。

默认代码：

const { autocomplete } = window["@algolia/autocomplete-js"];
const autocomplete_id = "#autocomplete-search-box";

function CreateAutoComplete(appid, search_api_key, index_name) {
  console.log("CreateAutoComplete Called");
  autocomplete({
    container: autocomplete_id,
    placeholder: "Type T to get completions",
    getSources() {
      return [
        {
          sourceId: "links",
          getItems({ query }) {
            const items = [
              { label: "Twitter", url: "https://twitter.com" },
              { label: "GitHub", url: "https://github.com" }
            ];

            return items.filter(({ label }) =>
              label.toLowerCase().includes(query.toLowerCase())
            );
          },
          getItemUrl({ item }) {
            console.log("GetItemURL", item);
            console.log("returning", item.url);
            return item.url;
          },
          templates: {
            item({ item }) {
              return item.label;
            }
          }
        }
      ];
    }
  });
}

Answer 1

请记住，getItemUrl() 需要键盘交互（通过箭头导航并单击回车）导航到结果 URL，而不是单击。

虽然重定向被 Twitter/Github 阻止了，但这在您的 codesandbox 中有效。

Algolia 自动完成不会使用静态源转到选定的 URL

Algolia autocomplete doesn't go to the selected URL with static sources

autocomplete

algolia