Question

我正在使用Algolia的algoliasearch-client-js和autocomplete.js来支持我网站上的搜索。这很有效。

但我还想要包含搜索查询匹配的文本的摘录/片段。怎么做？

我目前的代码是：

autocomplete('#search-input', { hint: true, autoselect: true }, [
{
    source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
    displayKey: 'title',
    templates: {
        footer: '<span class="search-foot">Powered by <a href="https://www.algolia.com/" target="_blank" title="Algolia - Hosted cloud search as a service"><img src="/static/assets/algolia-logo.png" width="47" height="15"></a></span>',
        suggestion: function(suggestion) {
          return '<div class="search-lang">' + 
              suggestion._highlightResult.platform.value + 
              '</div>' + 
              suggestion._highlightResult.title.value;
        }
    }
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
  window.location.href = suggestion.url;
});

要突出显示导致查询与记录匹配的摘录，他们的FAQ说：

AttributesToSnippet设置是一种缩短（“片段”）你的方法长文本块以在搜索结果中显示它们。想一想关于Google结果下方显示的一小段文字：它是从页面内容的句子的子集构建，包括您的匹配关键字，并避免充斥搜索结果页面。例如，如果限制“描述”的单词数属性为10，“_snippetResult.description.value”属性 JSON答案只包含10个最好的单词描述

然而，没有AttributesToSnippet的例子。在他们Github documentation上我找到了更多信息：

attributesToHighlight


范围：设置，搜索

type：字符串数组

默认值：null


要突出显示的默认属性列表。如果设置为null，则全部编入索引   属性突出显示。

包含要突出显示的属性列表的字符串   根据查询。属性由逗号分隔。您可以   也使用字符串数组编码（例如[“name”，“address”]）。如果   如果某个属性与查询不匹配，则返回原始值。通过   默认情况下，所有索引属性都会突出显示（只要它们是   字符串）。如果要突出显示所有属性，可以使用*。

我正在努力将他们抽象的，分散的信息翻译成一段连贯的代码。有什么建议吗？

Answer 1

attributesToIndex，attributesToHighlight和attributesToSnippet是三个主要settings used for highlighting。

attributesToIndex是一种索引设置（您可以在信息中心或后端设置它，但不能在前端设置）。
attributesToHighlight等于attributesToIndex。它们可以在索引设置中设置为attributesToIndex，但也可以在查询时覆盖（并且只能在attributesToIndex中包含属性）
attributesToSnippet等于空数组。每个属性都可以在末尾添加一个修饰符，例如:10，以表示您想要在代码段中添加多少单词。除此之外，它们的工作方式与attributesToHighlight相同。

我们举一个例子：

索引设置

attributesToIndex: ['title', 'description']
attributesToHighlight: ['title']
attributesToSnippet: ['description:3']

记录的

{
  "title": "Test article",
  "description": "A long long long test description long long long",
  "link": "https://test.com/test-article"
}

对于查询"test"，这里基本上是你得到的建议的JSON：

{
  "title": "Test article",
  "description": "A long long long test description long long long",
  "link": "https://test.com/test-article",
  "_highlightResult": {
    "title": {
      "value": "<em>Test article</em>"
    }
  },
  "_snippetResult": {
    "description": {
      "value": "... long <em>test</em> description ..."
    }
  }
}

请注意description和link对象中都没有_highlightResult和link attributesToIndex在搜索中被忽略，因为它不在description中 _highlightResult不在attributesToHighlight，因为它不在_highlightResult。

您还可以注意到，在_snippetResult和test中，<em></em>字都包含在console.log(suggestion)标记中。这是您可以用来显示哪些词匹配的标签。

我省略了some attributes of the answer但没有理解我的答案。您可以在浏览器控制台中通过在建议功能的开头添加一个小$ch = curl_init(); $user_link = https://graph.facebook.com/v2.7/'.$formDetails[0].'/leads?access_token='.$page->page_access_token; curl_setopt($ch, CURLOPT_URL, $user_link); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $temp_output = curl_exec($ch);来查看它们。

Answer 2

由于在纯粹的运气中找到了Algolia仪表板中的设置，我自己解决了这个问题。为了使返回的搜索结果也返回片段，我做了两件事：

<强> 1）即可。在Algolia的信息中心中有一个选项，它被命名为＆＃39;属于片段的属性，您可以在＆＃39;显示＆＃39;您正在搜索的特定索引的标签。

就我而言，我将该选项设置为我想在搜索查询中突出显示的记录属性，如下所示：

<强> 2）即可。配置完该设置后，我可以在autocomplete.js库的函数中访问_snippetResult。正如您在上图中看到的那样，我添加到＆＃39;属性的属性为片段＆＃39;选项是＆＃39;内容＆＃39;，因此我使用suggestion._snippetResult.content.value访问与搜索查询匹配的字词。

我的代码现在是：

autocomplete('#search-input', { hint: true, autoselect: false }, [
{
    source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
    displayKey: 'title',
    templates: {
        footer: '<span class="search-foot">Powered by <a href="https://www.algolia.com/" target="_blank" title="Algolia - Hosted cloud search as a service"><img src="/static/assets/algolia-logo.png" width="47" height="15"></a></span>',
        suggestion: function(suggestion) {

          return '<div class="search-lang">' + 
              suggestion._highlightResult.platform.value + 
              '</div><div class="search-title">' + 
              suggestion._highlightResult.title.value +
              '</div>' + '<div class="search-snippet">' + 
              suggestion._snippetResult.content.value + '</div>';
        }
    }
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
  window.location.href = suggestion.url;
});

总而言之，只需一个手动选项即可返回搜索代码段，而不必在代码中使用attributesToSnippet 某处。

如何显示Algolia搜索查询的匹配单词？

2 个答案: