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

Alphy Gacheru's avatar

How to fill the search input with the suggested query when clicked in Algolia autocomplete form.

I have the below code and when a user types something they get suggestions. How do I feel the input with the suggestion clicked by a user?

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