Question

我正在尝试调整WordPress插件https://github.com/algolia/algoliasearch-wordpress以适应我们的需求。我们想要做的是拥有一个搜索结果，该搜索结果会将数据加载到同一页面中。

我有我的WordPress帖子，其数据已成功建立索引。我已在页面上添加了搜索框，并且自动填充功能已被触发。

开箱即用，WordPress插件模板将结果包装在锚标记中，并为其分配找到结果的URL。单击后，将导航到该帖子。但是，我想做的是拦截单击并在不导航的情况下将结果加载到同一页面中。

我已从锚点删除了href。我还编辑了提供的autocomplete.php模板，其中发生了对autocomplete:selected的调用。在这里，我删除了通过删除window.location.href来离开导航的呼叫。

现在我有两个主要问题。

1-当用户单击搜索结果时，我希望输入内容包含他们单击的项目的标题。我通过添加autocomplete:selected在$searchInput[0].value = suggestion.post_title回调中添加了它。这似乎可以正确更改输入的值，但是一旦我单击远离输入的位置，它就会重新设置回原始的键入值。因此，如果我键入“ may”并单击结果“ mayonnaise”，则可以访问结果数据，但是输入返回到“ 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-为了用所选搜索结果的标题填充输入，我向自动完成对象的setVal方法添加了一个调用。我[仍然不确定为什么要这样做。

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

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

algolia wordpress自动完成功能

1 个答案: