Избегайте обновления поиска Vue.js при каждом вводе букв

Question

Я создал поисковый компонент с vue.js 2.0 в моем веб-приложении.Проблема, которая у меня есть сейчас, заключается в том, что она выполняет поиск по каждому типу события.Допустим, я хочу найти samsung.Он делает 7 запросов к моему серверу (7 букв).

Мое поле ввода выглядит следующим образом:

<input
        class="input pr-4 pl-10 block"
        type="text"
        placeholder="Search for anything..."
        v-model="search"
        @keydown.enter="isOpen = false"
        @keydown.esc="isOpen = false"
        @input="onChange"/>

Как сделать так, чтобы поиск выполнялся только при наборе слова (так чтоделает 1 запрос на мой сервер)

Answer 1

Обычно вы решаете подобные проблемы, создавая некоторую задержку или так называемое debounce .Отменяя функцию, вы в основном говорите: «Выполните эту функцию по истечении этого количества мс, если только эта функция не вызывается снова».Если пользователь печатает достаточно быстро, это сохраняет некоторые запросы на ваш сервер.Задержка должна быть достаточно маленькой, чтобы не быть заметной для пользователя, но должна быть достаточно большой, чтобы предотвратить нежелательный спам на ваш сервер.В этом примере я использую функцию отладки lodash ( документация ).

Если ваш поиск в общем занимает слишком много времени, отладка поможет уменьшить кровотечение, но не остановит его.Подумайте о добавлении фактической кнопки поиска и инициируйте поиск, нажав эту кнопку и / или нажав клавишу ввода.Вы также можете создать недорогой поиск по «предложениям» и обычный поиск, который просматривает все, подобно тому, что вы видите при вводе в поле поиска, скажем, в Википедии.

<template>
  <input
    class="input pr-4 pl-10 block"
    type="text"
    placeholder="Search for anything..."
    v-model="search"
    @keydown.enter="isOpen = false"
    @keydown.esc="isOpen = false"
    @input="debouncedOnChange"
  />
</template>

<script>
import _debounce from 'lodash.debounce';

export default {
  name: 'search',
  data () {
    return {
      search: '',
      isOpen: false
    }
  },

  computed: {
    debouncedOnChange () {
      return _debounce(this.onChange, 700);
    }
  },

  methods: {
    onChange () {
      // do something with this.search
    }
  }
}
</script>