javascript - 避免每次输入字母时更新 Vue.js 搜索

Question

我在我的 web 应用程序中使用 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

通常，您可以通过引入一定程度的延迟或所谓的去抖来解决此类问题。通过对函数进行去抖，您基本上是说“在这么多毫秒后执行此函数，除非再次调用去抖函数”。如果用户输入的速度足够快，就会节省一些对服务器的请求。延迟应该足够小，以免用户察觉，但也应该足够大，以防止向服务器发送不必要的垃圾邮件。在此示例中，我使用 lodash 的去抖函数 ( documentation )。

如果您的搜索总体上花费的时间太长，去抖将有助于减少出血，但不会阻止它。考虑添加一个实际的搜索按钮，并在单击该按钮和/或按 Enter 键时触发搜索。您还可以创建一个低成本的“建议”搜索和一个搜索所有内容的常规搜索，类似于您在维基百科等搜索框中键入内容时看到的内容。

<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>