In-Page Search with Ctrl+K
Press Ctrl+K (or Cmd+K on Mac) to activate instant search within this page. Navigate results with keyboard shortcuts and see live highlighting.
How It Works
This in-page search feature demonstrates advanced JavaScript techniques for creating a seamless user experience. When you press Ctrl+K, a search interface appears that indexes all text content on the page, highlights matching terms, and provides keyboard navigation between results.
Technical Implementation
1. Text Indexing Strategy
The search system indexes all text nodes within the main content area. It traverses the DOM tree recursively, collecting text from paragraphs, headings, and list items while preserving their original structure. This approach ensures accurate search results without modifying the underlying HTML structure.
2. DOM-Safe Highlighting
Highlighting matches requires careful DOM manipulation. The system wraps matched text in span elements with specific classes, ensuring that existing HTML structure remains intact. Before applying new highlights, all previous highlight spans are removed to prevent nested highlighting issues. This technique maintains accessibility and prevents breaking interactive elements.
3. Focus Management
Proper focus management ensures keyboard accessibility. When the search bar opens, focus moves to the input field. Pressing Escape returns focus to the previously focused element. The current match is scrolled into view smoothly, and visual indicators show which result is active. This creates an intuitive navigation experience.
4. Accessibility Features
The search interface includes ARIA labels, keyboard shortcuts, and screen reader announcements. The search input has appropriate role attributes, and the result counter provides live feedback. All interactive elements are keyboard accessible, and focus indicators are clearly visible. These features ensure the search works for all users.
How AI Builder Generates This Feature
AI Builder analyzes your feature request and generates complete WordPress implementations including Gutenberg blocks, custom CSS styling, and functional JavaScript code. For this in-page search feature, AI Builder created the entire search interface, keyboard event handlers, text indexing logic, and highlighting system in a single generation.
The plugin understands complex interactions like DOM traversal, event delegation, and accessibility requirements. It produces production-ready code that follows WordPress best practices and modern JavaScript standards. You can further customize the generated code through the WordPress editor or by modifying the CSS and JavaScript directly.
Prompt to Reproduce This Feature
Use this exact prompt with AI Builder to generate this in-page search feature:
Create this feature: pressing Ctrl+K opens a compact search bar, highlights matches within the post content, and allows Next/Previous navigation between results. Implement everything in vanilla JavaScript inside an HTML block.
Try It Yourself
Press Ctrl+K (or Cmd+K on Mac) anywhere on this page to activate the search. Type any word to see instant highlighting and use arrow keys to navigate between matches.