How to implement instantsearch example in pure JS

[aboriG7294]

Hello!

I have a laravel project with InstantSearch functionality. Now I want to implement also Autocomplete to it.
Given example is written in TypeScript and I don`t know how to combine it with my current pure JS code.

Can someone explain to me how to achieve that ?

Many many thanks!

[dhayab]

You can just remove anything TypeScript-specific to convert it into a JavaScript code, for example with https://github.com/algolia/autocomplete/blob/next/examples/starter/app.tsx:

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

import '@algolia/autocomplete-theme-classic';

- type AutocompleteItem = {
-   label: string;
-   url: string;
- };

- autocomplete<AutocompleteItem>({
+ autocomplete({
  container: '#autocomplete',
  getSources() {
    return [
      {
        sourceId: 'links',
        getItems({ query }) {
          const items = [
            { label: 'Twitter', url: 'https://twitter.com' },
            { label: 'GitHub', url: 'https://github.com' },
          ];

          return items.filter(({ label }) =>
            label.toLowerCase().includes(query.toLowerCase())
          );
        },
        getItemUrl({ item }) {
          return item.url;
        },
        templates: {
          item({ item }) {
            return item.label;
          },
        },
      },
    ];
  },
});

[aboriG7294]

Thanks! I will give it a try!

[aboriG7294]

Hello! Unfortunately I was not able to do the conversion for instantsearch example. Will much appreciate if someone could assist and provide the pure JS code. Thanks in advance!

[aboriG7294]

Finally I was able to convert the code, but still have one issue. Here is the code: https://pastebin.com/ECgYyXaQ
Issue is that instantSearchRouter is not initialised:
const uiState = instantSearchRouter.read();