Autocomplete as a dropdown with VueJS Composition API and vue-instantsearch #1273
Description
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>