动态加载数据的 Vuetify 自动完成

Question

我的自动完成表单中有 60k 个项目，所以我想在用户键入 3 个字符后加载它，其中仅包含给定字符的项目。是否有自动完成选项来实现这一点？

Answer 1

您应该在服务器端过滤这些数据量。

但这在 Vuetify 中是可行的。您可以使用search-input.sync 和计算属性来过滤项目。然后你应该通过输入法清除你的搜索值

  <v-autocomplete
    :value="value"
    :items="filterdItems"
    @input="clearSearch"
    :search-input.sync="search"
  />

export default {
  data() {
    return {
      value: null,
      search: "",
      items: [], // Your items
    };
  },
  computed: {
      filterdItems() {
          if (this.search.length < 2) return;
          return this.items.filter(item => item.startsWith(this.search))
      }
  }
  methods: {
    clearSearch() {
      this.search = '';
    },
  },
};