Dropdown Autocomplete Search Anything in Laravel course with Nuxt

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>
AhmadUUID Member
AhmadUUID
0
5
213
alex Member
alex
Moderator

Have you tried using a NuxtLink component inside the item?

item({ item, html }) {
  return html`
    <NuxtLink 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>
    </NuxtLink>
  `;
},

Haven't tested this so unsure if it will work. Just wondering if you've tried?

AhmadUUID Member
AhmadUUID

Yes now i was testing not working also not give me any errors

alex Member
alex
Moderator
Solution

Yeah my bad, returning HTML isn't going to work here. There's an example here on the docs, see if this helps?

https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-vue/#customizing-templates

AhmadUUID Member
AhmadUUID

Hi Alex, Thank u . I see the Example and now it's work 😁👍

alex Member
alex
Moderator

Perfect, so glad to hear that! 💪