如何让PlaceKit自动补全选中项触发正确API请求

问题核心是当前代码仅监听输入框的input事件发起搜索，但点击自动补全建议时不会触发该事件（或触发时依赖的计数器不符合条件），导致仍使用旧的输入内容。需要通过PlaceKit Autocomplete的onSelect回调处理选中事件，并同步调整搜索逻辑。

修改步骤： #

• 初始化Autocomplete时添加onSelect回调，获取选中的地点数据
• 移除依赖按键次数的charCount逻辑，改为输入或选中时直接发起搜索
• 统一搜索触发逻辑，确保输入和选中操作都能正确调用API

修改后的代码： #

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import placekitAutocomplete from '@placekit/autocomplete-js'
import '@placekit/autocomplete-js/dist/placekit-autocomplete.css'
import placekit from '@placekit/client-js'
import { debounce } from 'lodash'

// 响应式登录变量
const username = ref<string>('')
const password = ref<string>('')
const isLoginDisabled = computed(() => !username.value.trim() || !password.value.trim())

const handleLogin = () => {
  console.log('Login button clicked')
}

// 从环境变量安全加载API密钥
const API_KEY = import.meta.env.VITE_PLACEKIT_KEY || ''

// 带国家过滤器的PlaceKit实例
const pk = placekit(API_KEY, {
  countries: ['de'],
  maxResults: 3,
})

// 输入框的Vue引用
const searchInput = ref<HTMLInputElement | null>(null)

// 统一的搜索函数
const performSearch = (query: string) => {
  if (!query.trim()) return
  console.log('Searching for:', query)
  pk.search(query)
    .then((results) => console.log('Results:', results))
    .catch((err) => console.error('Error:', err))
}

onMounted(() => {
  if (searchInput.value) {
    // 初始化Autocomplete并绑定选择事件
    placekitAutocomplete(API_KEY, {
      target: searchInput.value,
      onSelect: (place) => {
        // 选中建议项时，使用地点名称发起搜索
        performSearch(place.label)
      }
    })

    // 防抖处理输入事件，用户手动输入时发起搜索
    searchInput.value.addEventListener(
      'input',
      debounce((event) => {
        const target = event.target as HTMLInputElement
        performSearch(target.value)
      }, 300),
    )
  }
})
</script>

关键说明： #

1. onSelect回调：PlaceKit Autocomplete提供的onSelect事件会在用户点击建议选项时触发，参数place包含选中地点的完整信息（如label、id等），直接使用该值发起搜索即可。
2. 统一搜索逻辑：将搜索逻辑抽离为performSearch函数，避免重复代码，同时确保输入和选中操作都能触发正确的API请求。
3. 移除charCount限制：原逻辑的按键次数限制会导致选中后无法触发搜索，且不符合用户输入的正常预期，建议直接根据输入内容变化发起搜索。

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