feat: implement fuzzy matching for autocomplete components and add Fuse.js for improved search functionality

This commit is contained in:
Bohdan Triapitsyn
2026-01-08 20:49:22 +02:00
parent 2a895311d9
commit 49fb01f42d
7 changed files with 50 additions and 26 deletions
@@ -1,5 +1,5 @@
import React from 'react';
import { cn } from '@/lib/utils';
import { cn, fuzzyMatch } from '@/lib/utils';
import { useSkillsStore } from '@/stores/useSkillsStore';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
@@ -36,9 +36,9 @@ export const SkillAutocomplete = React.forwardRef<SkillAutocompleteHandle, Skill
}, [loadSkills]);
React.useEffect(() => {
const normalizedQuery = searchQuery.trim().toLowerCase();
const normalizedQuery = searchQuery.trim();
const matches = normalizedQuery.length
? skills.filter((skill) => skill.name.toLowerCase().includes(normalizedQuery))
? skills.filter((skill) => fuzzyMatch(skill.name, normalizedQuery))
: skills;
const sorted = [...matches].sort((a, b) => {