Фильтрация опций

Vs Vue3 Select предлагает два параметра принимающих функции, которые можно использовать для реализации пользовательских алгоритмов фильтрации.

• filter
• filterBy

По умолчанию компонент выполняет очень простую проверку, чтобы увидеть, содержит ли текст опции текущий текст поиска. Используйте эти параметры для более подходящего вам алгоритма фильтрации опций.

Фильтрация с помощью Fuse.js

Вы можете использовать параметры filter и filterBy, чтобы подключить сторонние инструменты. Например: Fuse.js. Которое может производить поиск по нескольким объектным ключам с нечеткими соответствиями.

Loading...

<template>
  <v-select
    :filter="fuseSearch"
    :options="books"
    :get-option-label="(option) => option.title"
  >
    <template #option="{ author, title }">
      {{ title }}
      <cite>{{ author.firstName }} {{ author.lastName }}</cite>
    </template>
  </v-select>
</template>

<script setup>
import Fuse from 'fuse.js'
import books from '../data/books'

const fuseSearch = (options, search) => {
  const fuse = new Fuse(options, {
    keys: ['title', 'author.firstName', 'author.lastName'],
    shouldSort: true,
  })
  return search.length ? fuse.search(search).map(({ item }) => item) : fuse.list
}
</script>
<style scoped>
cite {
  display: block;
}
</style>