Fuse.js Search

Overview

ID86 uses client-side Fuse.js v7 fuzzy search instead of server-side WordPress search. All documentation posts are indexed into a JSON object and loaded into the browser on every page.

Search Surfaces

Surface	Selector	Visible on
Homepage Hero	#fusejs-input / #fusejs-results	Front page only
Command Palette	#id86-fuse-palette-input / #id86-fuse-palette-results	All non-front pages

The homepage intentionally omits the header search trigger so the hero search is the sole entry point.

Index Building

The function id86_fuse_search_index() in functions.php builds the index:

$posts = get_posts(array_merge(id86_documentation_query(), [
    'posts_per_page' => -1,
    'no_found_rows' => true,
]));

Each indexed record contains:

• t — Post title (weight 0.5)
• e — Post excerpt or trimmed content (weight 0.1)
• c — Category names array (weight 0.2)
• g — Tag names array (weight 0.2)
• u — Permalink

The index is localized into JavaScript via wp_localize_script:

window.id86FuseData = {
  index: [...],
  threshold: 0.4,
  maxResults: 10,
  noResults: "No references found."
};

Client-Side Rendering

The file js/id86-fusejs-global.js handles both search surfaces:

• Fuse.js options: threshold: 0.4, minMatchCharLength: 1, tokenize: true, weighted keys.
• Results show: highlighted title → metadata chips (first category + up to 2 tags) → 120-char excerpt.
• Keyboard navigation: arrows select results, Enter opens, Escape closes.
• The hero input is cloned on initialization to avoid plugin DOM conflicts.

Search Results Layout

Each result renders as:

┌─────────────────────────────────────┐
│ Matched Title with Highlighting     │
│ [Category] [Tag1] [Tag2]            │
│ Excerpt text matching search...     │
└─────────────────────────────────────┘

All result content is left-aligned. No technical labels such as cat: or tag: are displayed.

Dependencies

Resource	Source
Fuse.js v7	cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.min.js
Plugin CSS	fusejs-search/assets/css/search.css
Theme JS	js/id86-fusejs-global.js

Performance

• Fuse.js delay-JS exclusion: fusejs and fusejs-search are excluded from Perfmatters delay JS.
• Front page: Perfmatters optimizations (delay JS, defer JS, remove unused CSS, lazy load) are disabled entirely so search is interactive immediately.
• The search index is generated fresh on every page load; caching the localized script would require fragment cacheing. The index size is tiny for the current ~5 documentation posts.

Maintenance

• Keep hero and palette on the shared id86-fusejs-global.js renderer.
• Verify both search surfaces after changing the index format or the renderer.
• If adding new fields to the index, update the Fuse.js keys configuration and the metadata() renderer.