如何显示 Algolia 搜索查询的匹配词? [英] How to display the matched words of an Algolia search query?

问题描述

我正在使用 Algolia 的

2).配置该设置后，我可以在 autocomplete.js 库的函数中访问 _snippetResult.如上图所示，我添加到要片段的属性"选项的属性是内容"，因此我使用 suggestion._snippetResult.content.value 访问与搜索查询匹配的词.

我现在的代码是:

<小时>

autocomplete('#search-input', { 提示: true, autoselect: false }, [{来源:autocomplete.sources.hits(index, { hitsPerPage: 7 }),displayKey: '标题',模板:{页脚:'<span class="search-foot">Powered by <a href="https://www.algolia.com/" target="_blank" title="Algolia - 托管云搜索即服务"><img src="/static/assets/algolia-logo.png" width="47" height="15"></a></span>',建议:功能(建议){return '<div class="search-lang">'+建议._highlightResult.platform.value +'</div><div class="search-title">'+建议._highlightResult.title.value +'</div>'+ '<div class="search-snippet">'+建议._snippetResult.content.value + '</div>';}}}]).on('autocomplete:selected',function(event,suggestion,dataset){window.location.href = 建议.url;});

<小时>

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

I'm using Algolia's algoliasearch-client-js and autocomplete.js to power searches on my website. That works.

But I also want to include the excerpt/snippet of the text with which the search query matches. How to do that?

---

My current code is:

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;
});

---

To highlight the excerpt that caused the query to match with a record, their FAQ says:

The AttributesToSnippet setting is a way to shorten ("snippet") your long chunks of text to display them in the search results. Just think about the small pieces of text displayed below a Google result: it's built from a subset of the sentences of the page content, includes your matching keywords, and avoid flooding the search results page. For example, if you limit the number of words of the "description" attribute to 10, the "_snippetResult.description.value" attribute of the JSON answer will only contain the 10 best words of this description.

There's no example of AttributesToSnippet, however. On their Github documentation I find a bit more info:

attributesToHighlight

• scope: settings, search
• type: array of strings
• default: null

Default list of attributes to highlight. If set to null, all indexed attributes are highlighted.

A string that contains the list of attributes you want to highlight according to the query. Attributes are separated by commas. You can also use a string array encoding (for example ["name","address"]). If an attribute has no match for the query, the raw value is returned. By default, all indexed attributes are highlighted (as long as they are strings). You can use * if you want to highlight all attributes.

I'm struggling with translating their abstract, scattered information into a coherent piece of code. Any suggestions?

解决方案

I've fixed the problem myself, due to finding a setting in Algolia's dashboard by pure luck. To make the returned search results return the snippet too, I did two things:

1). There's an option in Algolia's dashboard that's named 'Attributes to snippet', which you can find in the 'Display' tab of the particular index that you're searching with.

In my case, I set that option to the record attribute that I wanted to highlight in my search queries like this:

2). After I configured that setting, I could access _snippetResult in the function for the autocomplete.js library. As you can see in the image above, the attribute that I added to the 'Attributes to snippet' option was 'content', and so I access the words that matched with the search query with suggestion._snippetResult.content.value.

My code now is:

---

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;
});

---

So to summarise, there is simply a manual option to enable the return of search snippets instead of having to use attributesToSnippet somewhere in the code.

这篇关于如何显示 Algolia 搜索查询的匹配词?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！