Highlighting option / Reverse-highlighting option?

[john-999]

Hey guys,

what if one of the "Sources" we define in an autocomplete search box needs to use our own Ajax calls (like we used to do it with Twitter typeahead), instead of the Algolia service?

Does this autocomplete currently have a highlighting option/solution I'm not aware of?

If not, any plans to add this option again? If yes, when?

(And also: What about the "reverse-highlighting" option in this context?)

[Haroenv]

The utilities underlying to Algolia's highlight components are available here: https://github.com/algolia/autocomplete/tree/next/packages/autocomplete-preset-algolia/src/highlight and should work if you delineate your object as { _highlightResult: { myPath: { value: 'test PRE_TAG highlighted POST_TAG' }}} with pre and post tag imported from https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-preset-algolia/src/constants/index.ts

[john-999]

Thank you for your quick answer.

Not being very advanced - do I interpret your answer correctly when I deduct that the below code should display highlighted results?
(For now, it does not - the returned/displayed items are empty strings.)

import { autocomplete } from "@algolia/autocomplete-js";

// LIKE THIS ?
const HIGHLIGHT_PRE_TAG = '__aa-highlight__';
const HIGHLIGHT_POST_TAG = '__/aa-highlight__';


autocomplete({

  container: '#search',
  
  getSources({query}) {
    return [
      {sourceId: 'myItems',

        getItems({ query }) {
          return items
        },
        
        templates: {
          item({ item, components }) {

            // LIKE THIS ?
            return components.Highlight({ _highlightResult: { myPath: { value: `PRE_TAG${item.some_attribute}POST_TAG` }}});
          }
        }
      }
    ]
  },

  //...
  
})

[Haroenv]

First, what does item.some_attribute contain? is it html or does it use some other method to highlight?

[john-999]

It does not contain HTML - it's just a method (the attribute of the object to display).

So this correctly displays the list of items (without highlighting anything, of course).

item({ item, components }) {
  return item.some_attribute;
}

[Haroenv]

ah, it's actually your method of filtering/searching which should be doing the highlighting, in our case it's the Algolia that highlights the match already, it doesn't get created frontend

[john-999]

Ok, 2 questions for now:

1. Are you saying that the server must return each result as a string like this PRE_TAGthis_is_a_result_stringPOST_TAG, in order to have the Algolia JS insert the HTML highlight tags?

2. Even without the highlighting issue, the below code does not display "This is a result" for each returned item - it only shows empty strings.
   (It is correct to only have import { autocomplete } from "@algolia/autocomplete-js"; and no need to import anything else, right?)

templates: {
  item({ item, components }) {
    return components.Highlight({ _highlightResult: { myPath: { value: 'This is a result' }}});

    // And same issue with:
    // return components.Highlight({ _highlightResult: { myPath: { value: 'PRE_TAGThis is a resultPOST_TAG' }}});
  }
}

[Haroenv]

Sorry for being somewhat vague earlier @john-999, but here's an example with non-algolia highlighting: https://codesandbox.io/s/blissful-fog-rnhxsm?file=/app.js

1. your backend somehow returns highlighting already. In this example it uses <mark></mark>

const items = [{ some_attribute: 'includes <mark>highlighting html</mark>' }];

3. then transform those identifiers with the tags that autocomplete expects

return items.map((item) => ({
  item,
  _highlightResult: {
    some_attribute: {
      value: item.some_attribute
        .replace(/<mark>/g, HIGHLIGHT_PRE_TAG)
        .replace(/<\/mark>/g, HIGHLIGHT_POST_TAG),
    },
  },
}));

5. finally, use Highlight({ hit: item, attribute }) in the rendering

item({item, components }) {
  return components.Highlight({hit: item, attribute: 'some_attribute' })
}

[john-999]

Awesome, this works now. Thank you so much for your help!

Btw, I think it would make sense to include this information in the documentation - I don't think I'm the only one looking for this information as highlighting is an important feature.

A minor cosmetic comment:

In the code under paragraph 3.:

PRE_TAG and POST_TAG would be HIGHLIGHT_PRE_TAG and HIGHLIGHT_POST_TAG if we want to apply Algolia's official naming scheme.