Vue3+Quasar集成Algolia autocomplete：选值不填充及日志问题求助

问题1：选中结果后输入框未填充内容 #

你注释掉的getItemInputValue是Algolia Autocomplete用来定义选中项时输入框显示文本的核心配置。取消注释并修改为返回企业名称字段即可：

getItemInputValue: ({ item }) => item.name,

该函数接收选中的item对象，返回你希望在输入框展示的字段（此处为企业的name属性）。

问题2：打印选中值到控制台 #

在Autocomplete的根配置中添加onSelect回调，该回调会在用户通过鼠标点击或回车选中项时触发，直接在函数内打印选中的对象：

onSelect({ item }) {
  console.log('选中的企业:', item);
},

如果只需要打印特定字段（比如企业ID或名称），可以修改为console.log('选中企业名称:', item.name)。

修改后的完整组件代码 #

<template>
  <div id="autocomplete" />
</template>

<script setup>
import { algoliaSearchClient } from 'boot/algolia'
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
import { onMounted, onBeforeUnmount } from 'vue'

import '@algolia/autocomplete-theme-classic'

const INDEX_NAME = 'companies'

let autocompleteInstance = null

onMounted(async () => {
  if (autocompleteInstance) {
    autocompleteInstance.destroy()
  }

  autocompleteInstance = autocomplete({
    container: '#autocomplete',
    placeholder: 'Search company',
    // 处理选中事件，打印选中值到控制台
    onSelect({ item }) {
      console.log('选中的企业:', item);
    },
    getSources ({ query }) {
      return [{
        sourceId: INDEX_NAME,
        // 定义选中项时输入框显示的文本
        getItemInputValue: ({ item }) => item.name,
        getItems () {
          const results = getAlgoliaResults({
            searchClient: algoliaSearchClient,
            queries: [{
              indexName: INDEX_NAME,
              query,
              params: {
                hitsPerPage: 5,
                attributesToSnippet: [],
                attributesToHighlight: ['name', 'city', 'country.label'],
                snippetEllipsisText: '…'
              }
            }]
          })

          return results
        },
        templates: {
          item ({ item, components, html }) {
            return html`
              <div class="aa-ItemWrapper">
                <div class="aa-ItemContent">
                  <div class="aa-ItemContentBody">
                    <div class="aa-ItemContentTitle">
                      ${components.Highlight({
                        hit: item,
                        attribute: 'name'
                      })}
                    </div>
                    <div class="aa-ItemContentDescription">
                      ${components.Highlight({
                        hit: item,
                        attribute: 'city'
                      })}
                    </div>
                  </div>
                  <div class="aa-ItemActions">
                    <button
                      class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
                      type="button"
                      title="Select"
                    >
                      <svg
                        viewBox="0 0 24 24"
                        width="20"
                        height="20"
                        fill="currentColor"
                      >
                        <path
                          d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            `
          }
        }
      }]
    }
  })
})

onBeforeUnmount(() => {
  if (autocompleteInstance) {
    autocompleteInstance.destroy()
  }
})
</script>

内容的提问来源于stack exchange，提问作者Eugene