Как использовать библиотеку Fuse.js для поиска?

Как я могу настроить поиск с использованием Fuse.js и useFuse для данных, загруженных с https://fakestoreapi.com/products? Почему при использовании полученных данных получаю пустой результат в массиве? В чем проблема, если использовать Fuse.js напрямую? Возможно, мои ожидания не совпадают с реальными результатами работы библиотеки Fuse.js. Вот часть моего кода: [...].
  • 26 августа 2024 г. 11:44
Ответы на вопрос 2
Для использования библиотеки Fuse.js для поиска, необходимо сначала установить библиотеку с помощью npm:

```
npm install fuse.js
```

Затем можно создать экземпляр Fuse и настроить его под нужды вашего поиска. В вашем случае, для данных, загруженных с https://fakestoreapi.com/products, вы можете сделать следующее:

```js
const Fuse = require('fuse.js');
const fetch = require('node-fetch');

fetch('https://fakestoreapi.com/products')
  .then(response => response.json())
  .then(data => {
    const fuse = new Fuse(data, {
      keys: ['title', 'category']
    });

    const results = fuse.search('search query');

    console.log(results);
  })
  .catch(error => console.error(error));
```

В вашем коде должно работать получение данных с API и поиск с использованием Fuse.js. Если вы получаете пустой результат в массиве, возможно проблема в настройке ключей для поиска (в примере выше я использовал 'title' и 'category'). Убедитесь, что ключи, которые вы указываете в `keys`, соответствуют структуре данных, которую вы получаете от API.

Если проблема остается и результат пустой, возможно стоит проверить данные, которые вы получаете от API, и убедиться, что они соответствуют вашим ожиданиям.

Надеюсь, это поможет вам разобраться с использованием библиотеки Fuse.js для поиска данных. Если у вас все еще возникают проблемы, не стесняйтесь задавать дополнительные вопросы.
У вас бардак в алгоритме поэтому с `new Fuse` (скорее всего и с useFuse) работает, но не так как вы ожидали. 
Пустой массив это логичный вывод console.log('results:', results) в этот момент
потому что getProducts() вы вызываетe после изменений в input

Рабочий кусок с useFuse
import { useFuse } from '@vueuse/integrations/useFuse';
const data = ref([]);
const input = ref('')
const found = ref();
fetch('https://fakestoreapi.com/products').then(r => r.json()).then(j => {data.value = j}) 
const { results } = useFuse(input, data, { matchAllWhenSearchEmpty:false, fuseOptions: { includeScore: true, keys: ['title'] } })
/*<template>
    {{ results }}
</template>*/
Похожие вопросы