RSK World - Search Filter Demo | Real-time Search, Fuzzy Match, Voice, Dark Mode | RSK World

Search & Filter Voice & Dark Mode Favorites & History Export & Import Vanilla JS

Search Filter Demo is a real-time search and filter app with instant results and highlighting. Includes: debounced search, fuzzy matching, regex/exact/case-sensitive options; category filters (Fruits, Vegetables, Animals, Countries, etc.); voice search (Web Speech API); dark mode; autocomplete; search history; favorites with LocalStorage; sort (Name A-Z, Z-A, Category, Relevance); grid/list view; pagination; export/import JSON; add custom items. Files: index.html, style.css, advanced.css, script.js, advanced.js, storage.js, utils.js. By rskworld.in.

If you find this Search Filter Demo project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Search Filter Demo

Real-time Search & Filter

script.js: Debounced search (250ms), fuzzy match over name/description/category, relevance scoring. Filter by category (All, Fruits, Vegetables, Animals, Countries, Flowers, Vehicles, Sports, Food, Planets, Favorites). Sort by Name A-Z, Z-A, Category, or Relevance. Highlight matching text in results.

filterItems(), fuzzyMatch(), getMatchScore(), highlightText()
Debounced input, regex/exact/case-sensitive options
Category buttons, sort select, result count and search time
62 sample items; search over name, description, category

Project Structure & Files

Root: index.html (search UI, modals, grid). CSS: style.css, advanced.css. JS: script.js (core search), advanced.js (voice, theme, pagination, modals), storage.js (LocalStorage), utils.js (helpers). data.json, config.js, manifest.json, sw.js (PWA). No build step. Open index.html or serve folder.

index.html, style.css, advanced.css, script.js, advanced.js, storage.js, utils.js
No build step – open index.html or static server
Font Awesome 6, vanilla HTML, CSS, JavaScript
Zero dependencies; PWA with service worker

Dark Mode & View Modes

advanced.css: Dark mode variables (--bg-primary, --card-bg, etc.). advanced.js: Theme toggle with Storage persistence; grid/list view toggle. Toolbar: theme, view, settings, export, import, favorites badge.

Storage.getTheme(), saveTheme(), toggleTheme()
advanced.css: .dark-mode body, .item-card, .search-container
Grid vs list view, persisted in LocalStorage
Smooth transitions and consistent theming

Voice, Autocomplete & History

advanced.js: Web Speech API for voice search; autocomplete dropdown from item names; search history tags (click to re-run). Settings: items per page, debounce delay, save history. Pagination for filtered results.

setupVoiceSearch(), setupAutocomplete(), renderSearchHistory()
SpeechRecognition, autocomplete-item click, history-tag click
Settings modal: itemsPerPage, debounceDelay, saveHistory
Pagination: prev/next, page info, renderCurrentPage()

Favorites, Export & Add Item

storage.js: Favorites (IDs in LocalStorage), toggleFavorite(), isFavorite(). Export/import JSON (favorites, history, theme, settings, viewMode, customItems). Add Item modal: name, category, icon, description; validation via Utils.validateItem(); custom items merged into itemsData on load.

Storage.getFavorites(), exportData(), importData(), getCustomItems()
Export button downloads JSON; Import modal or hidden file input
Add Item form, handleAddItem(), loadCustomItems()
Keyboard: / focus search, Escape clear

What You Get

Static HTML/CSS/JS: index.html, style.css, advanced.css, script.js, advanced.js, storage.js, utils.js, config.js, data.json, manifest.json, sw.js. README.md, DEPLOY.md, CHANGELOG.md, tests.js. No build step. Open index.html or serve folder.

Complete source – all HTML, CSS and JS files
No build step – open index.html or static server
README.md with usage and customization
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html to use the search filter. Type in the search box for real-time results; use category buttons and sort dropdown. Click heart to favorite; use toolbar for dark mode, view mode, settings, export/import. Voice search (mic) and autocomplete when supported. See README.md.

index.html – main search and filter UI
style.css and advanced.css: layout and dark mode
Voice: click mic, speak query; autocomplete suggests names
Author: RSK World | rskworld.in

Project Features

Core: real-time search, fuzzy/regex/exact matching, category filter, sort, highlight. Advanced: dark mode, voice search, autocomplete, search history, favorites, pagination, grid/list view, settings modal, add item, export/import JSON. PWA with service worker. All vanilla JS, no frameworks.

Core: debounce, fuzzy match, categories, sort, highlight
Advanced: theme, voice, autocomplete, history, favorites
Pagination, modals, export/import, custom items
Vanilla JS, responsive, LocalStorage

Credits & Acknowledgments

Search Filter Demo by RSK World. Real-time search filter with fuzzy match, voice search, dark mode and advanced features for learning front-end and vanilla JS.