naive ui搜索下拉框

Naive UI 是一个基于 Vue.js 的 UI 组件库，提供了一些常见的 UI 组件，包括下拉框。Naive UI 的下拉框组件支持搜索功能，可以通过输入关键字来快速过滤下拉框选项。

具体使用方法可以参考 Naive UI 的官方文档，在下拉框组件的 props 中设置 `filterable` 为 true，即可启用搜索功能。同时，还可以设置 `filter-method` 属性来自定义搜索方法，以满足更多的搜索需求。

以下是一个简单的示例代码：

<n-select v-model="selectedOption" filterable :filter-method="filterMethod">
  <n-option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</n-option>
</n-select>

export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        { label: '选项4', value: 'option4' },
        { label: '选项5', value: 'option5' }
      ]
    }
  },
  methods: {
    filterMethod(value, option) {
      return option.label.toLowerCase().indexOf(value.toLowerCase()) !== -1;
    }
  }
}

在上面的代码中，我们通过设置 `filterable` 为 true，启用了搜索功能。同时，我们还设置了 `filter-method` 属性，并定义了一个 `filterMethod` 方法来实现搜索逻辑。在这个方法中，我们通过比较选项的标签和搜索关键字，来判断该选项是否符合搜索条件。最后，我们将下拉框选项渲染到组件中，并使用 `v-model` 来绑定选中的选项。