Prevent the page from refreshing when clicking on the link

I'm using the @algolia/autocomplete-js library in a Nuxt.js project to display search results for products and users. The problem I'm facing is that when I click on a search result link, the page refreshes instead of navigating within the SPA. I want to prevent the page from reloading and use Nuxt's router to navigate programmatically.


    item({ item, html }) {
              return html`
                <a href="${item.url}" class="flex items-center space-x-2">
                  <img src="${item.image}" class="w-20 h-20 rounded-full" />
                  <span>${item.title}</span>
                </a>
              `;
            },

<script setup>

import { autocomplete } from '@algolia/autocomplete-js';
import {
  meilisearchAutocompleteClient,
  getMeilisearchResults,
} from '@meilisearch/autocomplete-client';
const client = meilisearchAutocompleteClient({
  url: 'http://localhost:7700',
  apiKey: 'masterkey',
  // http://backend.test:3000/products/1
  // http://backend/api/products/1
  
});
onMounted(() => {
  autocomplete({
    container: '#search',
    placeholder: 'What are you looking for?',
    autoFocus: true,
    getSources() {
      return [
        {
          sourceId: 'products',
          getItems({ query }) {
            return getMeilisearchResults({
              client,
              searchClient: client,
              queries: [
                {
                  indexName: 'products',
                  query: query,
                },
              ],
            });
          },
          getItemUrl({ item }) {
            return item.url;
        
          },  
          templates: {
            header({html}){
              return html`<span className="aa-SourceHeaderTitle">Products</span>
              <div className="aa-SourceHeaderLine"></div>
              `
              
            },
            item({ item, html }) {
              return html`
                <a href="${item.url}" class="flex items-center space-x-2">
                  <img src="${item.image}" class="w-20 h-20 rounded-full" />
                  <span>${item.title}</span>
                </a>
              `;
            },
          },
        },
        {
          sourceId: 'users',
          getItems({ query }) {
            return getMeilisearchResults({
              client,
              searchClient: client,
              queries: [
                {
                  indexName: 'users',
                  query: query,
                },
              ],
            });
          },
          templates: {
            header({html}){
              return html`<span className="aa-SourceHeaderTitle">Users</span>
              <div className="aa-SourceHeaderLine"></div>
              `
              
            },
            item({ item, html }) {
              return html`
                <a href="" class="flex items-center space-x-2">
                  <span>${item.name}</span>
                </a>
              `;
            },
          },
        },
      ];
    },
  });
});
</script>

<template>
  <div id="search"></div>
</template>

vincent15000

1 year ago

Level 63

With a simple link, you won't navigate inside the SPA.

<a href="${item.url}" class="flex items-center space-x-2">
	<img src="${item.image}" class="w-20 h-20 rounded-full" />
	<span>${item.title}</span>
</a>

To navigate inside the SPA, you need to use the NavLink vue-router component.

<RouterLink to="some-route">Link label</RouterLink>

In your project, it will probably by like this.

<RouterLink to="${item.url}" class="flex items-center space-x-2">
	<div>
		<img src="${item.image}" class="w-20 h-20 rounded-full" />
		<span>${item.title}</span>
	</div>
</RouterLink>

Make sure that inside the RouterLink component, you have a unique tag.

UUID

1 year ago

Level 6

@vincent15000 Not working

1 like

UUID

1 year ago

Best Answer

Level 6

@vincent15000

I find this and works
https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-vue/#customizing-templates

<script setup>
import { h, Fragment, render, onMounted } from 'vue';
import { autocomplete } from '@algolia/autocomplete-js';
import { useRouter } from 'vue-router';
import {
  meilisearchAutocompleteClient,
  getMeilisearchResults,
} from '@meilisearch/autocomplete-client';

// Initialize MeiliSearch client
const client = meilisearchAutocompleteClient({
  url: 'http://localhost:7700',
  apiKey: 'masterkey',
});

// Get the Vue Router instance for programmatic navigation
const router = useRouter();

onMounted(() => {
  autocomplete({
    container: '#search',
    placeholder: 'What are you looking for?',
    autoFocus: true,
    getSources() {
      return [
        {
          sourceId: 'products',
          getItems({ query }) {
            return getMeilisearchResults({
              client,
              searchClient: client,
              queries: [
                {
                  indexName: 'products',
                  query: query,
                },
              ],
            });
          },
          templates: {
            header({ html }) {
              return html`<span class="aa-SourceHeaderTitle">Products</span>
              <div class="aa-SourceHeaderLine"></div>`;
            },
            item({ item, components }) {
              return h(
                'div',
                {
                  class: 'flex items-center space-x-2 cursor-pointer',
                  onClick: (event) => {
                    event.preventDefault(); 
                    if (item.url) {
                      router.push(item.url); 
                    }
                  },
                },
                [
                  h('img', {
                    src: item.image,
                    class: 'w-20 h-20 rounded-full',
                  }),
                  h('span', null, [
                    h(components.Snippet, { hit: item, attribute: 'title' }),
                  ]),
                ]
              );
            },
          },
        },
    
      ];
    },
    renderer: { createElement: h, Fragment, render },
  });
});
</script>

<template>
  <div id="search"></div>
</template>

1 like

Please or to participate in this conversation.