Я использую Placekit для прямого геокодирования, и до сих пор это работает хорошо, но у меня есть проблема с автозаполнением. Когда я нажимаю на предложение из выпадающей части автозаполнения, оно не использует этот выбор для запроса. Вместо этого он по -прежнему делает запрос на ввод, в который я набрал. Как я мог это изменить?
Я создал StackBlitz для этой цели. Общественный API Inplcuded. Пожалуйста, используйте с осторожностью.
https://stackblitz.com/edit/vitejs-vite ... %2fapp.vue
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'
// Reaktive Login-Variablen
const username = ref('')
const password = ref('')
const isLoginDisabled = computed(() => !username.value.trim() || !password.value.trim())
const handleLogin = () => {
console.log('Login button clicked')
}
// API-Schlüssel sicher aus einer Umgebungsvariablen laden
const API_KEY = import.meta.env.VITE_PLACEKIT_KEY || ''
// Placekit-Instanz mit Länderfilter
const pk = placekit(API_KEY, {
countries: ['de'],
maxResults: 3,
})
// Vue-Ref für das Eingabefeld
const searchInput = ref(null)
let charCount = 0 // Counter to track input length
onMounted(() => {
if (searchInput.value) {
placekitAutocomplete(API_KEY, { target: searchInput.value })
// Debounced Input-Handling für bessere Performance
searchInput.value.addEventListener(
'input',
debounce((event) => {
const target = event.target as HTMLInputElement
charCount += 1 // Increase counter every keypress
if (charCount % 3 === 0) {
// Only search when divisible by 3
console.log('Searching for:', target.value)
pk.search(target.value)
.then((results) => console.log('Results:', results))
.catch((err) => console.error('Error:', err))
}
}, 300),
) // 300ms Verzögerung
}
})
Подробнее здесь: https://stackoverflow.com/questions/796 ... pi-request
Как проверить предложение автозаполнения для запроса API ⇐ Javascript
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение