Как проверить предложение автозаполнения для запроса APIJavascript

Форум по Javascript
Ответить Пред. темаСлед. тема
Anonymous
 Как проверить предложение автозаполнения для запроса API

Сообщение Anonymous »

Я использую 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
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Javascript»