⚡ Performance Metrics
Total Options: 15,000
Init Time: 0ms
Render Time: —ms
Search Time: —ms

15,000 Options with Virtual Scrolling

Experience blazing-fast performance

Live Demo
Try it: Type to search • Select 4+ items to see counter • Click badge to see popover with virtual scrolling
Configuration
Virtual Scroll Setup 
 
 
Performance Benefits
 
🚀 Performance Improvements
 
  • 25× faster opening: 750ms → 30ms
    •  
  • 13-33× faster search: 200-500ms → 15ms
    •  
  • 99.8% memory reduction: 7.5 MB → 15 KB
    •  
  • DOM nodes: 15,000 → ~30 visible items
 
✨ Features
 
  • Full keyboard navigation (arrows, Page Up/Down, Home/End)
    •  
  • Smooth mouse wheel scrolling
    •  
  • Drag scrollbar support
    •  
  • Works with search in both filter and navigate modes
    •  
  • Automatic activation based on threshold
 
⚙️ Configuration Options
 
Dropdown Virtual Scroll (Options List)
 
  • enable-virtual-scroll="true": Enables virtual scrolling
    •  
  • virtual-scroll-threshold="100": Activates at 100+ items (default)
    •  
  • option-height="50": Height per option in px (default: 50)
    •  
  • virtual-scroll-buffer="10": Buffer items (default: 10)
 
Popover Virtual Scroll (Selected Items)
 
  • pills-threshold="4": Shows counter at 4+ selections
    •  
  • pills-threshold-mode="count": Uses count mode (required)
    •  
  • show-counter="true": Enables clickable badge
    •  
  • badge-height="36": Height per pill in px (default: 36)
    •  
  • Popover activates virtual scroll automatically at 100+ selections
 
Note: Both dropdown and popover use the same virtual-scroll-buffer setting.
 
⚠️ Limitations
 
  • Groups (<optgroup>) are disabled in virtual scroll mode
    •  
  • All options must have consistent height
 
Rich Rendering with Custom Callbacks
 
Virtual scroll works with complex custom rendering
 
Live Demo
 
  
Try it: Select 100+ items to see virtual scroll in the popover with custom rendering.
					Uses callbacks for rich badge styling and content.
 
Instructions
 
What's happening:
 
  1. Dropdown options: Custom rendering with product details, ratings, and stock info
    2.  
  2. Main badges: Simple text display (compact)
    3.  
  3. Popover badges: Rich rendering with priority icons and ratings
    4.  
  4. Priority styling: Color-coded badges based on priority level
 
When to use:
 
  • Complex data structures
    •  
  • Need different rendering in dropdown vs badges
    •  
  • Dynamic styling based on item properties
    •  
  • Large datasets requiring virtual scroll
 
Implementation
 
Key Callbacks Used
 
renderOptionContentCallback - Custom HTML for dropdown options
 
renderBadgeContentCallback - Simple text for main badges
 
renderSelectionBadgeContentCallback - Rich HTML for popover badges
 
getSelectionBadgeClassCallback - CSS classes for priority styling
 
customStylesCallback - Inject custom CSS variables
 
Configuration
 
  • option-height="90" - Taller options for rich content with description
    •  
  • badge-height="65" - Taller badges in popover for multi-line content
    •  
  • pills-threshold="3" - Show counter at 3+ items
    •  
  • virtual-scroll-threshold="100" - Virtual scroll at 100+ items
 
How Virtual Scrolling Works
 
Efficient rendering technique
 
Traditional Rendering
 
❌ Without Virtual Scroll
 
  • Renders: All 15,000 DOM elements
    •  
  • Memory: ~7.5 MB
    •  
  • Opening: 750ms lag
    •  
  • Search: 200-500ms per keystroke
    •  
  • Scrolling: Choppy, laggy
 
Virtual Scrolling
 
✅ With Virtual Scroll
 
  • Renders: Only ~30 visible items
    •  
  • Memory: ~15 KB
    •  
  • Opening: 30ms instant
    •  
  • Search: 15ms per keystroke
    •  
  • Scrolling: Butter smooth
 
Key Differences
 
The Virtual Scrolling Technique
 
Virtual scrolling (also called "windowing") renders only the items currently visible in the viewport, plus a small buffer above and below.
 
How it works:
 
  1. Calculate visible range: Based on scroll position and viewport height
    2.  
  2. Render only visible items: Create DOM elements for items in range (~30 items)
    3.  
  3. Position absolutely: Use absolute positioning with calculated top offsets
    4.  
  4. Update on scroll: As user scrolls, re-render items for new visible range
    5.  
  5. Buffer zone: Render extra items above/below to prevent flickering
 
Why it's so fast:
 
  • Constant DOM size: Always ~30 elements regardless of total items
    •  
  • Minimal reflows: Fixed height allows fast offset calculations
    •  
  • Efficient updates: Only re-render when visible range changes
    •  
  • Memory efficient: No need to keep 15,000 DOM nodes in memory
 
Implementation Examples
 
Different use cases
 
Demo
 
Basic Virtual Scroll
 
 
 
 
Controls
 
Custom Configuration
 
 
 
 
Description
 
With Async Search
 
 
 
 
Rich Rendering with Callbacks - Code Example
 
Complete implementation
 
Demo
 
Setup & Configuration
 
 
 
 
Controls
 
Rendering Callbacks
 
 
 
 
Description
 
Popover Rendering & Styling