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

Alphy Gacheru's avatar

Querying in the middle of a word with algolia autocomplete

I have the following autocomplete with algolia autocomplete and vue and it works fine. However, when querying it doesn't doesn't query in the middle of a word. How can I achieve that?

<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({
        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.