Есть input для ввода текста:
<input type="search" class="input_search"
autocomplete="off"
v-model.trim="query"
placeholder="Поиск по названию"
@keyup="sendSearch">
<!-- @change="sendSearch"> -->
Дата:
data() {
return {
query: '',
res: [],
}
},
И метод:
async sendSearch() {
console.log( this.query )
// this.res = await postSearchByTitles(this.query)
// setTimeout(() => console.log( this.query ), 1000)
},
И функция для связи с бэкендом
import { postSearchByTitles } from '~/services/api'
// Поиск постов по названиям (title - мультиязычное)
// export async function postSearchByTitles(title) {
// return await get(`posts/search/${title}`)
// }
Сейчас функция поиска срабатывает либо при вводе каждого символа (@keyup) и отправляет кучу последовательных запросов к API (что нагружает бэкенд), либо по нажатию на кнопку "Enter"/или в пустую область (событие @change), что в моём случае тоже не совсем правильно.
Вопрос:
- Как изменить метод "sendSearch()" таким образом, что бы он выполнялся к примеру не чаще 1 раза в секунду при вводе текста?
- Или что лучше всего по окончанию ввода поиска (но тут абстракция т.к. мы не знаем закончил пользователь ввод или нет, а клик мимо поиска не всегда значит окончание поиска)
lodash.throttle