Autocomplete as a dropdown with VueJS Composition API and vue-instantsearch

[eugenevk]

I want to build a Vue component that is a dropdown with Algolia's autocomplete and vue-instantsearch (I am using VueJS 3, Composition API and Quasar as the framework). With the below code I get quite far, but can't make it work completely. E.g. the hits are always displayed and I want it to act as a dropdown with selectable values. My goal is to have a company field e.g. for a contact in which I can search for a company and select a value that then should be displayed in the field. Is that possible at all?

<template>
    <ais-instant-search :search-client="searchClient" index-name="companies">
      <ais-autocomplete>
        <template v-slot="{ currentRefinement, refine }">
          <q-input
            autofocus
            dense
            outlined
            placeholder="Search company"
            type="search"
            :model-value="currentRefinement"
            @update:model-value="(value) => refine(value)"
          >
            <template v-slot:append>
              <IconSearch class="text-secondary" />
            </template>
          </q-input>
          <div class="aa-Panel">
            <div class="aa-PanelLayout aa-Panel--scrollable">
              <ais-hits>
                <template v-slot="{ items }">
                  <section class="aa-Source">
                    <ul class="aa-List">
                      <li v-for="item in items" :key="item.objectID" class="q-pa-xs" @click="test(item)">
                        <div class="aa-ItemContentBody">
                          <div class="aa-ItemContentTitle">
                            <ais-highlight attribute="name" :hit="item" />
                            (<ais-highlight attribute="city" :hit="item" />)
                          </div>
                        </div>
                      </li>
                    </ul>
                  </section>
                </template>
              </ais-hits>
            </div>
          </div>
        </template>
      </ais-autocomplete>
    </ais-instant-search>
</template>

<script setup>
import { algoliaSearchClient } from 'boot/algolia'

import '@algolia/autocomplete-theme-classic'
import IconSearch from 'src/components/Icons/IconSearch.vue'

const searchClient = algoliaSearchClient
</script>