Ele Ajax Search - Elementor Widget Plugin

A professional, optimized AJAX search widget for Elementor with autocomplete functionality and extensive customization options.

Features

✅ Real-time AJAX Search - Instant search results without page reload
✅ Autocomplete Support - Live suggestions as users type
✅ Multiple Post Types - Search posts, pages, or custom post types
✅ Configurable Results - Control number of results displayed
✅ Featured Images - Optional post thumbnails in results
✅ Loading Indicator - Optional spinner for better UX
✅ Fully Customizable - Extensive styling controls for every element
✅ Responsive Design - Mobile-friendly out of the box
✅ Keyboard Navigation - Arrow keys and Enter support
✅ Security Focused - Nonce verification and data sanitization
✅ Performance Optimized - Debounced requests and efficient queries
✅ Best Practices - Follows WordPress and Elementor coding standards

Requirements

• WordPress 5.8 or higher
• PHP 7.4 or higher
• Elementor 3.0.0 or higher

Installation

Method 1: Manual Installation

1. Download all plugin files
2. Create the following folder structure in wp-content/plugins/:

ele-ajax-search/
├── ele-ajax-search.php
├── widgets/
│   └── ajax-search-widget.php
├── assets/
│   ├── css/
│   │   └── ele-ajax-search.css
│   └── js/
│       └── ele-ajax-search.js
└── languages/

3. Place the files in their respective folders:

   • Main plugin file: ele-ajax-search.php in the root
   • Widget class: ajax-search-widget.php in widgets/ folder
   • CSS file: ele-ajax-search.css in assets/css/ folder
   • JS file: ele-ajax-search.js in assets/js/ folder

4. Go to WordPress Admin → Plugins

5. Find "Ele Ajax Search" and click "Activate"

Method 2: Upload ZIP

1. Create a ZIP file of the ele-ajax-search folder
2. Go to WordPress Admin → Plugins → Add New
3. Click "Upload Plugin"
4. Choose the ZIP file and click "Install Now"
5. Click "Activate Plugin"

Usage

Adding the Widget

1. Edit a page with Elementor
2. Search for "Ajax Search" in the widgets panel
3. Drag the widget to your desired location
4. Configure the settings in the left panel

Widget Controls

Content Tab

• Placeholder Text: Text shown in the empty search box
• Post Type: Select which post type to search (posts, pages, custom post types)
• Number of Results: How many results to display (1-20)
• Enable Autocomplete: Toggle live search suggestions
• Show Featured Image: Display post thumbnails in results
• No Results Text: Message shown when no results found
• Show Loading Icon: Display spinner during search

Style Tab

The plugin includes extensive styling options:

• Search Box: Width, padding, typography, colors, borders, shadows
• Results Container: Background, borders, shadows, max height
• Result Item: Padding, spacing, hover effects, borders
• Result Title: Typography, colors, hover states
• Result Image: Size, spacing, border radius
• Loading Icon: Color and size

Customization

Modifying Search Query

You can filter the search query using the following hook:

add_filter('ele_ajax_search_query_args', function($args, $settings) {
    // Modify query arguments
    $args['posts_per_page'] = 10;
    return $args;
}, 10, 2);

Custom Result Template

To customize the result item HTML, modify the buildResultItem function in ele-ajax-search.js.

Additional Styling

Add custom CSS in your theme or child theme:

/* Custom styling */
.eas-search-container {
    /* Your custom styles */
}

Features Explained

Autocomplete

When enabled, search results appear automatically as users type (after 2 characters minimum). The search is debounced by 300ms to prevent excessive requests.

Keyboard Navigation

• Down Arrow: Move to next result
• Up Arrow: Move to previous result
• Enter: Navigate to selected result
• Escape: Close results dropdown

Security

• AJAX requests use WordPress nonces for verification
• All user input is sanitized
• Output is escaped to prevent XSS attacks
• Follows WordPress security best practices

Performance

• Query optimization (disabled unnecessary meta and term caches)
• Debounced AJAX requests
• Abort previous requests when new search starts
• Efficient DOM manipulation
• No jQuery conflicts

Troubleshooting

Results Not Showing

1. Check if JavaScript console shows any errors
2. Verify Elementor is activated
3. Clear browser and WordPress cache
4. Check if the selected post type has published posts

Styling Issues

1. Check for theme CSS conflicts
2. Use browser inspector to identify conflicting styles
3. Increase CSS specificity if needed
4. Clear cache after style changes

AJAX Not Working

1. Verify WordPress AJAX URL is correct
2. Check browser console for 403/404 errors
3. Disable other plugins to check for conflicts
4. Check server error logs

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Android)

Performance Recommendations

1. Use a caching plugin (W3 Total Cache, WP Rocket)
2. Limit the number of results to improve load time
3. Optimize images used in search results
4. Use a CDN for better global performance

Developer Notes

Code Structure

The plugin follows object-oriented programming principles:

• Main plugin class handles initialization and registration
• Widget class extends Elementor's base widget class
• JavaScript uses a class-based approach for better organization

Coding Standards

• Follows WordPress Coding Standards
• Uses Elementor's best practices
• Proper documentation and comments
• Secure and optimized code

Hooks Available

• ele_ajax_search_query_args - Filter search query arguments
• Standard WordPress hooks apply (pre_get_posts, etc.)

Support

For issues or feature requests, please:

1. Check the troubleshooting section
2. Review the code comments for guidance
3. Test with default WordPress theme and no other plugins

Changelog

Version 1.0.0

• Initial release
• AJAX search with autocomplete
• Multiple post type support
• Extensive customization options
• Responsive design
• Keyboard navigation
• Security and performance optimizations

Credits

Developed following WordPress and Elementor best practices and coding standards.

License

GPL v2 or later

---

Note: This plugin requires Elementor to be installed and activated. It will not work without Elementor.