Я использую 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
Форум по Javascript
-
Anonymous
1746535067
Anonymous
Я использую Placekit для прямого геокодирования, и до сих пор это работает хорошо, но у меня есть проблема с автозаполнением. Когда я нажимаю на предложение из выпадающей части автозаполнения, оно не использует этот выбор для запроса. Вместо этого он по -прежнему делает запрос на ввод, в который я набрал. Как я мог это изменить?
Я создал StackBlitz для этой цели. Общественный API Inplcuded. Пожалуйста, используйте с осторожностью.
https://stackblitz.com/edit/vitejs-vite-bovfbecx?file=src%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
}
})
Подробнее здесь: [url]https://stackoverflow.com/questions/79608639/how-to-validate-autocomplete-suggestion-for-api-request[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия