Developer API Demo - Reef Search

Developer API Features

Custom Hotkeys

Change the keyboard shortcut from the default Ctrl/Cmd+K to any combination using setHotkey() or data-hotkey attribute.

Selection Callbacks

Register a callback function to be notified whenever a search result is selected using onselect().

Programmatic Control

Open, close, and query the search modal programmatically with open(), close(), and openWithQuery().

Index Manipulation

Add custom records, retrieve all indexed content, or trigger reindexing with addCustomRecords(), getIndex(), and reindex().

Runtime Configuration

Update theme, colors, mode, and placeholder text at runtime using the styling API methods.

State Inspection

Check if the modal is open and get current configuration with isOpenState() and getConfig().

Custom Hotkey Demo

This page uses data-hotkey="altk,f" which means you can open search with Alt+K or Ctrl+F.

Try Different Hotkeys

Enter a hotkey combination and click the button to update:

Current hotkey: altk,f

Selection Callback Demo

Register a callback to receive selected result data. Try searching and selecting something.

Selected Result Log

No results selected yet...

Programmatic Control Demo

Control Search via JavaScript

Click buttons to control the search modal

Runtime Styling Demo

Update Styles at Runtime

Current mode: regular

Action Recognition Demo

These buttons are indexed and can be triggered directly from search. Try searching for "demo button" or "show message".

Action results will appear here

Field Focus Demo

These form fields can be focused from search. Try searching for "email" or "username".

Username: Email: Country:

Headless Mode Demo

In headless mode, Reef builds the index without showing the default modal. Use data-headless="true" on the script tag or new ReefSearch({ headless: true }) to get indexed data for custom implementations.

Code Examples

<!-- Initialize in headless mode -->
<script src="reef.min.js" data-headless="true"></script>

<script>
// Get all indexed records (available after indexing completes)
window.Reef.setOnReady(({ index }) => {
  console.log('Index ready with', index.length, 'records');
});

// Search the index programmatically
const results = window.Reef.search('installation', 10);

// Get sitemap URLs without building the index
window.Reef.getSitemapUrls().then(urls => {
  console.log('Found URLs:', urls);
});

// Rebuild the index (useful after adding custom records)
window.Reef.rebuildIndex().then(() => {
  console.log('Index rebuilt');
});
</script>
<!-- Custom modal implementation -->
<div id="custom-search-modal" class="custom-modal">
  <div class="modal-backdrop"></div>
  <div class="modal-panel">
    <input type="text" id="custom-search-input" placeholder="Search..." />
    <div id="custom-search-results"></div>
  </div>
</div>

<script>
// Minimal custom modal with vanilla JS
const modal = document.getElementById('custom-search-modal');
const input = document.getElementById('custom-search-input');
const resultsDiv = document.getElementById('custom-search-results');

window.Reef.setOnReady(() => modal.style.display = 'block');

input.addEventListener('input', (e) => {
  const results = window.Reef.search(e.target.value, 10);
  resultsDiv.innerHTML = results.map(r => `
    <div class="custom-result" data-url="${r.url}">
      <span class="result-type">${r.type}</span>
      <span class="result-title">${r.headingText}</span>
    </div>
  `).join('');
});
</script>

React Integration Example

import { useEffect, useState } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    window.Reef?.setOnReady(({ index }) => {
      setIndex(index);
    });
  }, []);

  const handleSearch = (e) => {
    const q = e.target.value;
    setQuery(q);
    setResults(window.Reef?.search(q, 10) || []);
  };

  return (
    <div className="search-container">
      <input value={query} onChange={handleSearch} placeholder="Search..." />
      <ul>
        {results.map(r => (
          <li key={r.id} onClick={() => window.location.href = r.url}>
            {r.headingText}
          </li>
        ))}
      </ul>
    </div>
  );
}

Dropdown Search Example

const createDropdownSearch = () => {
  const container = document.createElement('div');
  container.innerHTML = `
    <div class="dropdown-search">
      <button id="search-trigger">Search</button>
      <div class="dropdown-menu">
        <input type="text" placeholder="Type to search..." />
        <div class="results"></div>
      </div>
    </div>
  `;
  document.querySelector('nav').appendChild(container);

  const input = container.querySelector('input');
  const resultsDiv = container.querySelector('.results');
  
  window.Reef.setOnReady(() => {
    input.addEventListener('input', (e) => {
      const results = window.Reef.search(e.target.value, 5);
      resultsDiv.innerHTML = results.map(r => `
        <div class="result" data-url="${r.url}">${r.headingText}</div>
      `).join('');
    });
  });
};

createDropdownSearch();

Parity Features Demo

Autocomplete / Suggest

Search Suggestions

Type in the box below to see auto-suggested completions:

Suggestions: (none yet)

Faceted Filtering

Filter by Record Type

Get counts and filter results by type:

Click to see faceted counts and filtered results

BM25 Scoring

Compare Scoring Algorithms

Test both classic and BM25 scoring:

Search results will appear with scores here

Query Analytics

Track Popular Queries

Track queries and retrieve popular ones:

Query analytics will appear here