Skip to content

Add 'fullyHighlighted', 'matchLevel' and 'matchedWords' to '_highlightResult' in autocomplete client #1337

@sgilberg

Description

@sgilberg

Description
In the hits returned from getAlgoliaResults, the _highlightResult object includes not just the value of the attribute but also three properties that help to interpret the match: fullyHighlighted, matchLevel, and matchedWords. The getMeilisearchResults hits, in contrast, only include the value. I would like to request the addition of the other three values, if at all possible.

Basic example
We are attempting to migrate from Algolia to Meilisearch, but this is a sticking point for us. A real-world example where these properties come into play is one we have frequently: an index of entities that each have a primary name and an array of synonyms, both of which are searchable attributes. In the autocomplete results display, we would like to show just the highlighted name if it is a full match, and if not, we add on the best-matched synonym (showing a fully-highlighted synonym match if one is found, a synonym with matchLevel: full if not, and finally the synonym with the most matched words if no full match level is available).

Here's a real example of what this looks like for us using Algolia's results (showing only the templates definition here for brevity):

templates: {
    item({ item, components, html}) {
        if (item._highlightResult.full_name.matchLevel !== 'full' && item._highlightResult.synonyms) {
            var synonym_match = item._highlightResult.synonyms.find(function(synonym) {
                return synonym.matchLevel === 'full' && synonym.fullyHighlighted;
            });
            if (synonym_match === undefined) {
                synonym_match = item._highlightResult.synonyms.find(function(synonym) {
                    return synonym.matchLevel === 'full';
                });
                if (synonym_match === undefined && item._highlightResult.full_name.matchLevel === 'none') {
                    var synonyms = item._highlightResult.synonyms.filter(function (synonym) {
                        return synonym.matchLevel !== 'none';
                    }).sort(function (a, b) {
                        return b.matchedWords.length - a.matchedWords.length;
                    });
                    synonym_match = synonyms[0];
                }
            }
            if (synonym_match !== undefined) {
                synonym_match._highlightResult = { // Workaround to get the highlight component to work (bonus points if you can improve upon Algolia's current default)
                    name: {
                        value: synonym_match.value
                    }
                };
                return html`<span>${components.Highlight({
                    hit: item,
                    attribute: 'full_name',
                })} <span class="text-muted">- synonym match: ${components.Highlight({
                    hit: synonym_match,
                    attribute: 'name',
                })}</span></span>`;
            }
        }

        return html`<span>${components.Highlight({
            hit: item,
            attribute: 'full_name',
        })}</span>`;
    },
},

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions