Fuse.js Playground
Interactive playground for testing and experimenting with Fuse.js fuzzy search library. Configure all search options and see real-time results.
Input
Output
| id | title | author | year | category |
|---|---|---|---|---|
| 1 | JavaScript: The Good Parts | Douglas Crockford | 2008 | Programming |
| 2 | Clean Code | Robert C. Martin | 2008 | Programming |
| 3 | The Pragmatic Programmer | Andrew Hunt | 1999 | Programming |
| 4 | Design Patterns | Gang of Four | 1994 | Software Engineering |
| 5 | Introduction to Algorithms | Thomas H. Cormen | 1990 | Computer Science |
| 6 | Code Complete | Steve McConnell | 1993 | Programming |
| 7 | Refactoring | Martin Fowler | 1999 | Software Engineering |
| 8 | The Mythical Man-Month | Frederick Brooks | 1975 | Project Management |
| 9 | Structure and Interpretation of Computer Programs | Harold Abelson | 1984 | Computer Science |
| 10 | Working Effectively with Legacy Code | Michael Feathers | 2004 | Programming |
Readme
What is Fuzzy Search?
Fuzzy search is a search technique that finds matches even when the search query doesn't exactly match the text. Unlike exact search where "apple" only matches "apple", fuzzy search can find "aple" (with a typo), "Apple" (different case), or even "apples" (plural form). This works by calculating how similar two strings are, accounting for typos, misspellings, different character cases, and minor variations. It's essential for creating user-friendly search experiences where users don't need to type perfectly accurate queries to find what they're looking for.
How does Fuse.js work?
Fuse.js is a JavaScript library that implements fuzzy search using an approximate string matching algorithm. It works by:
- Indexing: Creating an efficient data structure from your searchable data
- Scoring: Calculating a similarity score between the search query and each item (0.0 = perfect match, 1.0 = no match)
- Filtering: Returning results that meet the threshold criteria
- Ranking: Sorting results by relevance based on their scores
The library uses configurable options like threshold (how fuzzy the search should be), location (where to expect matches), and distance (how far from the expected location to search), giving developers fine-grained control over search behavior.
Tool Description
The Fuse.js Playground is an interactive testing environment for the Fuse.js fuzzy search library. It allows developers to experiment with all available search configuration options and see real-time results on custom or sample data. You can configure search keys with custom weights, adjust basic options like case sensitivity and score inclusion, and fine-tune advanced parameters like threshold, location, and distance. The tool provides immediate visual feedback showing how configuration changes affect search results, making it ideal for prototyping search functionality before implementation.
Features
- Custom Data Input: Load your own JSON data to test search behavior on real datasets
- Configurable Search Keys: Define which fields to search with custom weight priorities
- Real-time Results: See instant feedback as you modify search queries or options
- Basic Options: Control case sensitivity, diacritics handling, sorting, and score display
- Advanced Fine-tuning: Adjust threshold, location, distance, field normalization, and more
- Extended Search Syntax: Test advanced query patterns like prefix search (^), exact match (!), and more
- Results Visualization: View search results in a sortable table with optional match scores
- Sample Dataset: Pre-loaded book collection for immediate testing and experimentation
Examples
Basic Search:
- Query: "fantasy" → Finds all books in the fantasy category
- Query: "tolkien" → Finds books by author J.R.R. Tolkien
- Query: "lord rings" → Finds "The Lord of the Rings" despite missing words
Fuzzy Matching:
- Query: "hary poter" (typos) → Still finds "Harry Potter"
- Query: "1984" → Finds the book by George Orwell
- Query: "scifi" → Matches "Science Fiction" category
Extended Search (when enabled):
- Query: "^The" → Finds titles starting with "The"
- Query: "!Fantasy" → Exact match for "Fantasy" category
- Query: "'Dune" → Finds items including the word "Dune"
Configuration Options
Search Keys:
- Define which fields to search (e.g., title, author, category)
- Assign weights to prioritize certain fields (higher weight = more important)
Basic Options:
- Case Sensitive: Match letter case exactly
- Include Score: Show relevance scores (0.0 = perfect, 1.0 = poor)
- Ignore Diacritics: Treat accented characters as their base form (é = e)
- Sort Results: Order results by relevance score
- Find All Matches: Continue searching after finding the first match
Advanced Options:
- Min Match Char Length: Minimum characters required for a match (default: 1)
- Location: Expected position of matches in the text (default: 0 = beginning)
- Threshold: How fuzzy the search should be, from 0.0 (exact) to 1.0 (very fuzzy)
- Distance: Maximum distance from expected location to search
- Use Extended Search: Enable advanced query syntax (^, !, ', etc.)
- Ignore Location: Don't consider position when matching
- Ignore Field Norm: Don't account for field length in scoring
- Field Norm Weight: How much field length affects scoring
Use Cases
- Testing Search Implementation: Prototype and validate search functionality before coding
- API Configuration: Determine optimal Fuse.js settings for your application
- Search Behavior Analysis: Understand how different options affect result quality
- Client Demonstrations: Show stakeholders how search will behave with real data
- Learning Fuse.js: Hands-on experimentation to understand the library's capabilities
- Data Structure Testing: Verify your JSON data structure works with fuzzy search
- Search Quality Tuning: Fine-tune threshold and other parameters for best results