Searchbar recommended

Search input with dropdown results, keyboard navigation, and global shortcuts. Collapsible toggle button reveals search form with results.

Quick Start

Initialize a searchbar with full keyboard support in one line.

// Initialize with Cmd/Ctrl+K shortcut and badge
Searchbar.init('#mySearchbar', {
  globalShortcut: true,
  showShortcutBadge: true
})

Basic HTML Structure

Toggle button that reveals a search form with input, close button, and results dropdown.

<div class="focus-searchbar" id="mySearchbar">
  <button class="focus-searchbar-toggle" type="button">
    <i class="fa fa-search"></i><span> Search</span>
  </button>
  <form class="focus-searchbar-form" role="search">
    <input type="search" class="focus-searchbar-input" placeholder="Search..." autocomplete="off">
    <button type="button" class="focus-searchbar-close">
      <i class="fa fa-times"></i>
    </button>
    <div class="focus-searchbar-results"></div>
  </form>
</div>

JavaScript API

Searchbar.init(element, options)

Initialize a searchbar with keyboard shortcuts, event handlers, and optional shortcut badge.

// Default: Cmd/Ctrl+K with badge
Searchbar.init('#mySearchbar')

// Custom shortcut: Cmd/Ctrl+F
Searchbar.init('#mySearchbar', {
  shortcutKey: 'f'
})

// Slash key with no modifier (like GitHub)
Searchbar.init('#mySearchbar', {
  shortcutKey: '/',
  shortcutModifier: 'none'
})

// Alt+S shortcut
Searchbar.init('#mySearchbar', {
  shortcutKey: 's',
  shortcutModifier: 'alt'
})

// No global shortcut (toggle/close buttons only)
Searchbar.init('#mySearchbar', {
  globalShortcut: false
})

Options

Searchbar.destroy(element)

Remove all event listeners and clean up a searchbar instance.

Searchbar.destroy('#mySearchbar')

Searchbar.open(element)

Open the searchbar and focus the input.

Searchbar.open('#mySearchbar')

Searchbar.close(element, clearValue)

Close the searchbar and optionally clear the input value.

Searchbar.close('#mySearchbar')       // Clears input
Searchbar.close('#mySearchbar', false) // Keeps input value

Searchbar.toggle(element)

Toggle the searchbar between open and closed states.

Searchbar.toggle('#mySearchbar')

Methods Summary

Keyboard Navigation

When initialized with Searchbar.init(), the following keyboard shortcuts are automatically enabled:

Shortcut Badge

The shortcut badge is automatically added when showShortcutBadge: true and displays the platform-appropriate shortcut.

// Badge shows '⌘K' on Mac, 'Ctrl+K' on Windows
Searchbar.init('#shortcutExample', {
  globalShortcut: true,
  showShortcutBadge: true
})

Search Results Dropdown

Results dropdown displays automatically populated results with icons, titles, and preview text. Arrow key navigation is built-in.

<div class="focus-searchbar-results">
  <a href="/components/buttons" class="focus-searchbar-result-item">
    <div class="focus-searchbar-result-icon">
      <i class="fa fa-square focus-text-primary"></i>
    </div>
    <div class="focus-searchbar-result-content">
      <div class="focus-searchbar-result-title">Buttons</div>
      <div class="focus-searchbar-result-preview">Interactive action triggers</div>
    </div>
  </a>
  <!-- More results... -->
</div>

No Results State

Display a message when search returns no matches.

<div class="focus-searchbar-results">
  <div class="focus-searchbar-no-results">
    <i class="fa fa-search"></i>
    <p>No results found for "xyz123"</p>
  </div>
</div>

Platform Utilities

The searchbar uses shared utilities from the JavaScript Utilities API for platform detection and shortcut formatting.

import { isMac, getShortcutText, matchesShortcut } from 'focus-ui'

// Platform detection
isMac()                          // true on macOS

// Format shortcuts for display
getShortcutText('k')             // '⌘K' on Mac, 'Ctrl+K' on Windows
getShortcutText('/', 'none')     // '/'

// Check keyboard events
document.addEventListener('keydown', (e) => {
  if (matchesShortcut(e, 'k', 'cmd')) {
    // Cmd+K on Mac, Ctrl+K on Windows
  }
})

CSS Classes Reference

Accessibility