Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Alphy Gacheru's avatar

How to get unique attributes using algolia autocomplete?

I've got the following code and currently, I'm getting all the location attributes from each model. Therefore ending up with duplicates. How can I get unique locations and their count as well.

<template>
  <div class="app-container">
    <h1>Vue Application</h1>
    <div id="autocomplete" />
  </div>
</template>

<script lang="jsx">
import { h, Fragment, render, onMounted } from "vue";
import algoliasearch from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";

export default {
  name: "AutoComplete",
  setup() {
    onMounted(() => {
      autocomplete({
         onStateChange({ state }) {
    console.log(state.query); // Actual value
  },
        container: "#autocomplete",
        getSources({ query, setQuery, refresh }) {
          return [
            {
              sourceId: "properties",
              getItems({query}) {
                return getAlgoliaResults({
                  searchClient: algoliasearch(
                    "5ALV3LSLJ1",
                    "bde35d15e4037209a089a5731721c6c1"
                  ),
                  queries: [
                    {
                      indexName: "properties",
                      query,
                      params: {
                        hitsPerPage: 5,
                      },
                    },
                  ],
                });
              },
      templates: {
                item({ item, components }) {
                  return (
                    <div className="aa-ItemWrapper">
                      <div className="aa-ItemContent">
                        <div className="aa-ItemContentBody">
                          <div className="aa-ItemContentTitle">
                            <components.Highlight hit={item} attribute="location" />
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                },
              },
          
            },
          ];
        },
        renderer: { createElement: h, Fragment, render },
      });
    });
  },
};
</script>
0 likes
0 replies

Please or to participate in this conversation.