vue.js下拉框模糊查询

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="Search..." />
    <select>
      <option v-for="item in filteredOptions" :key="item.value" :value="item.value">
        {{ item.text }}
      </option>
    </select>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const options = ref([
      { value: 'apple', text: 'Apple' },
      { value: 'banana', text: 'Banana' },
      { value: 'cherry', text: 'Cherry' },
      // ...更多选项
    ]);
    const searchQuery = ref('');

    const filteredOptions = computed(() => {
      return options.value.filter(option =>
        option.text.toLowerCase().includes(searchQuery.value.toLowerCase())
      );
    });

    return { searchQuery, filteredOptions };
  }
};
</script>

import { ref, computed } from 'vue';
import { debounce } from 'lodash-es'; // 引入lodash-es库的debounce函数

export default {
  setup() {
    const options = ref([...]);
    const searchQuery = ref('');

    const filterOptions = debounce((query) => {
      return options.value.filter(option =>
        option.text.toLowerCase().includes(query.toLowerCase())
      );
    }, 300); // 设置300毫秒的防抖时间

    const filteredOptions = computed(() => {
      return filterOptions(searchQuery.value);
    });

    return { searchQuery, filteredOptions };
  }
};