Is this compatible with Algolia Autocomplete?

[edsonfeimberg]

As far as my understanding goes, Instant Search and Autocomplete are treated as different things in Algolia's Instant Search documentation. My current implementation in Algolia uses the Autocomplete feature and i am trying to migrate it to Typesense, but Algolia's documentation is making me a bit confused if Autocomplete is part of instant search or not

[jasonbosco]

@edsonfeimberg I used to find this a little confusing too! It turns out that there is a library called Autocomplete.js and then there's a widget called autocomplete in the Instantsearch.js library.

If you are using Autocomplete.js, then you don't need this adapter to use it with Typesense, as it already supports fetching data from any async data sources. So you can use the Typesense JS library directly and make calls to the search or multi search endpoints to fetch the data from Typesense to pass on to autocomplete.js. Here's an example of how to integrate autocomplete.js with typesense.

If you are using the autocomplete widget in Instantsearch.js, then you can indeed use this adapter to integrate it with Typesense. Here's an example from the test-suite on how to do this.

[vnugent]

Please document this!!! I'm in the same boat as the OP and was struggling to decide which is which.

[joker-777]

@vnugent I'm trying to implement this but I'm having a hard time converting the data received from typesense into a form that I can use components.Highlight({hit: item, attribute: "value"}) which is provided by the autocomplete library. I wish I could import SearchResponseAdapter to adapt the response. Is there any recommended way?

[jasonbosco]

@joker-777 You should be able to import the SearchResponseAdapter from the typesense-instantsearch-adapter and pass it the Typesense response to get an object in Algolia's response format that should work with the highlight component.

[joker-777]

@jasonbosco I'm trying but it doesn't work

import SearchResponseAdapter from "typesense-instantsearch-adapter/lib/SearchResponseAdapter"

webpack also tells me export 'default' (imported as 'SearchResponseAdapter') was not found in 'typesense-instantsearch-adapter/lib/SearchResponseAdapter' (possible exports: SearchResponseAdapter, __esModule)

[joker-777]

@jasonbosco is there a public sandbox example or a public typesense server with some dummy data which I could use to create some examples?

[jasonbosco]

@joker-777 You want to import it like this:

https://github.com/typesense/typesense-docsearch.js/blob/f2c496434b58c75767d534eb5cef2cd72a49af90/src/lib/DocSearch.js#L7

Feel free to use this collection: https://recipe-search.typesense.org/. You'll see the API keys in the network requests.

[uncvrd]

@jasonbosco oh wow didn't realize there was a search response adapter! I've been trying to get this to work with an algolia autocomplete custom plugin so this adapter will be super helpful. However using the import as specified above, it states there are missing declaration files :(

[jasonbosco]

@uncvrd I think that's just a warning. We don't yet publish types for that file. So if you add // @ts-ignore before the import line, the warning should go away.

[joker-777]

@jasonbosco Thanks a lot. I created a sandbox that shows my current problem. I can't get the highlight to work. In fact components.Highlight doesn't work at all. Only components.Snippet but the highlight markers are displayed as text. @uncvrd Does it work for you?

https://codesandbox.io/s/typesense-autocomplete-rkgrkr?file=/src/index.js

[jasonbosco]

@joker-777 It looks like <mark> tags are not compatible with that component. It worked once I switched the highlight tags to the default one autocomplete.js expects. I've highlighted the changes I did from your code snippet below:

import { autocomplete } from '@algolia/autocomplete-js';
import Typesense from 'typesense';
import { SearchResponseAdapter } from 'typesense-instantsearch-adapter/lib/SearchResponseAdapter';
import '@algolia/autocomplete-theme-classic';

const init_search_field = () => {
  const client = typesense_client();
  // const adapter = typesense_adapter()
  autocomplete({
    debug: true,
    container: '#root',
    getSources: ({ query }) => [
      {
        sourceId: 'r',
        templates: {
          item({ item, components, html }) {
           // ======> Had to surround with a <div> to fix issues with the default CSS ===
            return html`<div>
              ${components.Snippet({
                hit: item,
                attribute: 'title',
              })})
            </div>`;
          },
        },
        getItems: () =>
          client
            .collections('r')
            .documents()
            .search({
              q: query,
              query_by: 'title',
              highlight_start_tag: '__aa-highlight__', // <===== Customize highlight tags
              highlight_end_tag: '__/aa-highlight__',  // <===== Customize highlight tags
              highlight_full_fields: 'title', // <===== Needed for Highlight component
            })
            .then((result) => {
              return search_response_adapter(result).adapt().hits;
            }),
        getItemInputValue: ({ item }) => {
          return item.title;
        },
      },
    ],
  });
};

const search_response_adapter = (result) =>
  new SearchResponseAdapter(
    result,
    { params: {} },
    { geoLocationField: '_geoloc' }
  );

const typesense_client = () =>
  new Typesense.Client({
    apiKey: 'XXX',
    nodes: [
      {
        host: 'XXX',
        port: '443',
        protocol: 'https',
      },
    ],
    connectionTimeoutSeconds: 2,
  });

init_search_field();

Link to code sandbox: https://codesandbox.io/s/typesense-autocomplete-forked-www6x9?file=/src/index.js

Update: for the Highlight component you want to add highlight_full_fields: 'title' as a search param, because by default only snippeting is turned on in Typesense.

[joker-777]

@jasonbosco Thanks a lot for this detailed solution it works indeed. Are you planning to support this in a more convenient way? For example, you could provide a method that basically does the following

export const adaptSearchResponse = (result) => {
  const adapter = new SearchResponseAdapter(
    result,
    { params: {} },
    { geoLocationField: '_geoloc' }
  return adapter.adapt().hits
}

or simply a method that creates a SearchREsponseAapter instance using the default configuration object.

[jasonbosco]

@joker-777 I'm wondering where a method like this would go in the adapter...

[joker-777]

@jasonbosco Something like this master...joker-777:master (I didn't test it)

Then I could just write adapter = new SearchResponseAdapter(result)

[jasonbosco]

For future reference, here's another way to show highlights using autocomplete.js without having to use the typesense-instantsearch-adapter: https://github.com/typesense/typesense-autocomplete-demo/blob/caf732d6921507a2748656db1e2be0989e6e6f74/index.html#L78-L87