Client-side Search with Reflex

A demonstration of integrating powerful client-side search libraries (Fuse.js and MiniSearch.js) with the Reflex framework. This project showcases how to implement fast, responsive search functionality entirely on the frontend without requiring server-side processing.

Features

• ⚡ Real-time search with 300ms debouncing
• 🔍 Fuzzy matching for typo-tolerant searches
• 📱 Responsive design with dialog-based search interface
• 🎯 Multiple field search across titles and authors
• 🚀 No server requests - all searching happens client-side
• ⌨️ Keyboard shortcuts (⌘K to open search)

Demo

The search interface includes:

• Clean, modern dialog-based search modal
• Real-time results as you type
• Score-based result ranking
• Structured display of search results

Fuse.js Implementation

Fuse.js is a powerful, lightweight fuzzy-search library with excellent customization options.

Key Features

• Advanced fuzzy matching algorithms
• Flexible scoring system
• Extensive configuration options
• ~50KB library size (uncompressed)

Setup

1. Install Dependencies

   uv sync

2. File Structure

   your-project/
   ├── app.py
   ├── assets/
   │   └── fuse.js
   │   └── list.json
   │
   

3. Data Format Your list.json should follow this structure:

   [
     {
       "title": "Document Title",
       "author": {
         "firstName": "John",
         "lastName": "Doe"
       }
     }
   ]

4. Custom Script (/public/fuse.js)

   let fuse;
   
   window.initializeFuse = function(data) {
     const options = {
       keys: ['title', 'author.firstName', 'author.lastName'],
       threshold: 0.3,
       includeScore: true
     };
     fuse = new Fuse(data, options);
   };
   
   window.searchFuse = function(query) {
     if (!fuse || !query.trim()) return [];
     return fuse.search(query);
   };

Fuse.js Configuration Options

• threshold: Controls fuzziness (0.0 = perfect match, 1.0 = match anything)
• keys: Fields to search within
• includeScore: Return relevance scores
• shouldSort: Sort results by score

---

MiniSearch.js Implementation

MiniSearch is a tiny, fast full-text search engine optimized for performance.

Key Features

• Extremely fast search performance
• Small bundle size (~25KB uncompressed)
• Memory efficient
• Advanced text processing

Setup

1. File Structure (same as Fuse.js)

   your-project/
   ├── app.py
   ├── assets/
   │   └── minisearch.js
   │   └── list.json
   │
   

2. Custom Script (/public/minisearch.js)

   let miniSearch;
   
   window.initializeMinisearch = function(data) {
     miniSearch = new MiniSearch({
       fields: ['title', 'author.firstName', 'author.lastName'],
       storeFields: ['title', 'author'],
       searchOptions: {
         boost: { title: 2 },
         fuzzy: 0.2,
         prefix: true
       }
     });
   
     const dataWithIds = data.map((item, index) => ({
       id: index,
       ...item
     }));
   
     miniSearch.addAll(dataWithIds);
   };
   
   window.searchMinisearch = function(query) {
     if (!miniSearch || !query.trim()) return [];
   
     const results = miniSearch.search(query, {
       fuzzy: 0.2,
       prefix: true,
       boost: { title: 2 }
     });
   
     return results.map((result, index) => ({
       item: {
         title: result.title,
         author: result.author
       },
       refIndex: result.id || index,
       score: 1 - result.score
     }));
   };

MiniSearch Configuration Options

• fields: Fields to index for searching
• storeFields: Fields to include in results
• fuzzy: Fuzzy matching tolerance
• prefix: Enable prefix matching
• boost: Boost specific fields in ranking

---

Usage

Running the Application

reflex run