algolia wordpress 自动完成

Question

我正在尝试调整 WordPress 插件 https://github.com/algolia/algoliasearch-wordpress 以满足我们的需要。我们希望能够做的是拥有一个搜索结果，该结果将在同一页面中加载数据。

我的 WordPress posts 及其数据已成功编入索引。我已经在页面上添加了一个搜索框，并且正在触发自动完成功能。

开箱即用，WordPress 插件模板将结果包装在锚标记中，并将找到的结果的 URL 分配给它。单击后，您将导航到 post。但是，我想做的是拦截该点击并将结果加载到同一页面而不离开。

我已经从锚点中删除了 href。我还编辑了提供的 autocomplete.php 模板，其中调用了 autocomplete:selected。在那里，我通过删除 window.location.href.

删除了导航离开的调用

现在我有两个主要问题。

1 - 当用户单击搜索结果时，我希望在输入中填充他们单击的项目的标题。我通过添加 $searchInput[0].value = suggestion.post_title 在 autocomplete:selected 回调中添加了它。这似乎正确地改变了输入的值，但只要我点击远离输入，它就会 re-set 回到原始键入的值。因此，如果我键入 'may' 并单击结果 'mayonnaise'，则可以访问结果数据，但输入 returns 返回 'may'。我的函数看起来是这样的：

/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
    .on('autocomplete:selected', function (e, suggestion) {
    console.log(suggestion);
    autocomplete.autocomplete.close();
});

2 - 当用户点击离开时，自动完成下拉菜单似乎没有隐藏。为了解决这个问题，我不得不使用我认为有点讨厌的 jQuery。我想知道这是否真的需要？ autocomplete:selected 调用下方的代码如下所示：

jQuery('body').on("click", function(event){
    if (!jQuery(event.target).closest($searchInput[0]).length) {
        autocomplete.autocomplete.close();
    }
});

Answer 1

找到了我的问题的一些答案。

1 - 为了用所选搜索结果的标题填充输入，我添加了对自动完成 object 的 setVal 方法的调用。我[我仍然不确定为什么需要这样做。

/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
    .on('autocomplete:selected', function (e, suggestion) {
        autocomplete.autocomplete.setVal(suggestion.post_title);
});

2 - 自动完成 object 的配置似乎使用 WP_DEBUG 的值来设置 debug 值。可以在此处找到可用于自动完成组件的选项 https://github.com/algolia/autocomplete.js#options。这让我发现当 debug 设置为 true 时，自动完成框不会在选择时隐藏。这是为了让组件的调试和样式更容易。

algolia wordpress 自动完成

algolia wordpress autocomplete

wordpress

algolia