Customizing the HTML and CSS structure of my autocomplete

I have a question regarding customizing the HTML and CSS structure of my autocomplete input using Algolia. Below is my current configuration:

autocomplete({
  container: '#autocomplete',
  placeholder: 'Search',
  insights: true,
  getSources({ query }) {
    return [
      {
        sourceId: 'products',
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: 'default',
                query,
                params: {
                  hitsPerPage: 10,
                  attributesToSnippet: ['title:10'],
                  snippetEllipsisText: '…',
                },
              },
            ],
          });
        },
        templates: {
          item({ item, components, html }) {

            let slug = item.slug

            const postLink = `/${slug}`;
            return html`<a href="${postLink}" class="aa-ItemWrapper">
            ${item.title}
            </a>`;
          },
        },
      },
    ];
  },
});

I would like to know how I can customize the structure of the HTML and apply additional CSS classes to the autocomplete input. Specifically, I want to insert additional HTML elements and classes within the autocomplete input. Any guidance or examples would be greatly appreciated. Thank you!"

1 Like

For css customization, you can override the css variable of the default theme or select each item by their classname. autocomplete-theme-classic | Autocomplete | Algolia
For the html customisation, I apply javascipt edition of the page or element after document content loaded event.
I did’nt find official ressource for it apart this: Creating a custom renderer | Autocomplete | Algolia