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

问题描述

我vue.js在我的 webapp 中构建了一个 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 个请求）

标签： javascriptsearchvue.js

您通常通过构建一些延迟或所谓的debounce来解决这类问题。通过对函数进行去抖动，您基本上说“在这么多毫秒后执行此函数，除非再次调用去抖动函数”。如果用户输入的速度足够快，这会为您的服务器节省一些请求。延迟应该足够小，不会让用户注意到，但应该足够大，以防止不必要的垃圾邮件发送到您的服务器。在这个例子中，我使用了 lodash 的 debounce 函数（文档）。

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

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

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

问题描述

解决方案

推荐阅读