Skip to content

Adam Greenwell

Live Search & Dropdown Results

Lumenare Search provides instant, real-time search results as users type, with a dropdown showing the most relevant results without page reloads.

How It Works

When a user types in the search field:

  1. After minimum characters (default: 3), search triggers
  2. AJAX request sends query to server
  3. Results are processed through the search index
  4. Most relevant results appear in dropdown
  5. Results update as user continues typing

Configuration

General Settings

Enable Plugin: Turn live search on/off globally

Search Placeholder: Text shown in search input field

  • Example: "Search…", "Find posts…", "Type to search…"

Minimum Characters: Number of characters before search triggers

  • Default: 3
  • Recommended: 3-4
  • Lower = more responsive but more queries
  • Higher = fewer queries but less responsive

Display Settings

Dropdown Results: Number of results shown in live dropdown

  • Default: 10
  • Recommended: 5-15 depending on site size
  • Fewer results = faster queries
  • More results = better discovery

Enable Search Term Highlighting: Highlight matching terms in results

  • Recommended: Enabled
  • Improves user experience
  • Shows why results match

Integration

Automatic Integration

Lumenare Search automatically replaces:

  • Default WordPress search forms
  • Gutenberg Search blocks
  • Theme search forms

No additional configuration needed!

Shortcode

Add search form anywhere:

[lumenare_search]

Widget

Add "Lumenare Search" widget:

  1. Go to Appearance → Widgets
  2. Add "Lumenare Search" widget
  3. Configure widget settings
  4. Place in desired widget area

Theme Integration

Use standard WordPress function:

get_search_form();

The plugin automatically enhances this with live search.

Customization

CSS Styling

Target these classes for customization:

  • .lumenare-search-form – Search form container
  • .lumenare-search-input – Search input field
  • .lumenare-search-results – Dropdown results container
  • .lumenare-search-result – Individual result item
  • .lumenare-search-highlight – Highlighted search terms

JavaScript Hooks

The plugin provides JavaScript events:

  • lumenareSearch:before – Before search query
  • lumenareSearch:after – After search results
  • lumenareSearch:select – When result is selected

Troubleshooting

Check:

  1. JavaScript errors in browser console
  2. jQuery is loaded (required dependency)
  3. AJAX is working (admin-ajax.php accessible)
  4. Minimum characters setting
  5. Plugin is enabled

Solutions:

  • Fix JavaScript errors
  • Ensure jQuery is loaded
  • Check AJAX URL
  • Adjust minimum characters
  • Verify plugin is enabled

Results Not Updating

Check:

  1. Browser cache
  2. WordPress cache
  3. JavaScript errors
  4. AJAX requests completing

Solutions:

  • Clear browser cache
  • Clear WordPress cache
  • Fix JavaScript errors
  • Check network tab for AJAX requests

Styling Issues

Check:

  1. Theme CSS conflicts
  2. Z-index issues
  3. Positioning problems

Solutions:

  • Add custom CSS to override theme styles
  • Adjust z-index if needed
  • Check positioning in browser inspector

Best Practices

Performance

  • Keep dropdown results reasonable (5-15)
  • Use stop words to reduce query complexity
  • Monitor query performance
  • Implement caching if needed

User Experience

  • Set appropriate minimum characters (3-4)
  • Enable search term highlighting
  • Ensure dropdown is visible and accessible
  • Test on mobile devices

Accessibility

  • Ensure keyboard navigation works
  • Test with screen readers
  • Verify focus management
  • Check color contrast

← Back to Documentation Home | Keyword Matching →