How To Add AJAX Live Search Results in Divi With Divi Search Helper

Why Use Live AJAX Search Results?

Divi’s built-in Theme Builder allows you to create a custom Search Results Page, which is an excellent option if you prefer a traditional search experience. If you’re interested in setting up a search results page, check out our tutorial on How to Create a Search Results Page in Divi.

However, if you’re looking for a faster, more interactive alternative, the live AJAX search results feature in the Divi Search Helper plugin is a game-changer. With AJAX live search, users see immediate results as they type, displayed in a dynamic dropdown below the search bar, eliminating the need to load a separate search results page.

How It Works

The Divi Search Helper plugin extends the functionality of the existing Divi Search module by adding the powerful live AJAX search results feature and many other extra settings. Instead of creating a new or separate module, this plugin takes a different approach and builds on the built-in Divi Search module, making it easy to set up without needing extra steps or complexity while keeping everything within the familiar Divi interface.

With this feature, as users begin typing in the search bar, relevant results instantly appear in a dynamic dropdown, right below the search input field. This allows visitors to find products or content quickly, without waiting for a full page reload.

Key Features of the Live AJAX Search

1. Customizing Search Criteria

The Divi Search Helper plugin allows you to fully customize what content is searchable on your Divi website. Whether you’re managing an eCommerce store, a blog, or any custom post type, you can easily select the post types, taxonomies, and even custom fields that should be included in the search results.

You can choose any post types—such as blog posts, WooCommerce products, portfolios, or custom post types—to be included in the search results.

In addition to post types, you can specify which categories, tags, or other custom taxonomies should be searchable, allowing users to refine their searches.

We provide checkboxes for you to select which parts of the post to include in the search criteria. You can choose to search the post title text, the post excerpt text, the entire post content text, or even the taxonomy term, such as the category name.

One of the plugin’s underrated features is the ability to include custom meta fields in the search, which includes custom fields! If your content has additional metadata or custom fields—such as project details or client names, or product attributes—these fields can be incorporated into the search results. For example, on a portfolio site, you can make project types or client names searchable through their associated custom fields. This also supports things like WooCommerce product SKUs by using _sku in the custom meta field setting.

2. Customizing the Search Results Display

The Divi Search Helper plugin also gives you full control over how the search results are displayed in the live AJAX dropdown, providing a more meaningful search experience for your visitors.

This is how it looks by default—very basic, but EVERYTHING can be customized!

You can display essential details such as post titles, featured images, excerpts, and meta details like author, date, and taxonomies, regardless of whether you’re showing blog posts, custom post types, or WooCommerce products. For WooCommerce products, you can go further by showing specific product details like the price and short description, helping customers make informed purchasing decisions right from the search bar.

In addition to customizing the content of your search results, the Divi Search Helper plugin integrates seamlessly with Divi’s familiar design settings, allowing you to customize the appearance of the dropdown:

Next Steps: Install the Divi Search Helper Plugin

To start using the Divi Search Helper plugin and unlock the power of live AJAX search results, follow our installation guide here. This step-by-step guide will walk you through the process of installing and activating the plugin so you can begin customizing your search experience.

First, ensure that you have the plugin installed and activated. If you do not own this plugin yet, you will need to purchase the Divi Search Helper plugin from our website or join our Divi Adventure Club Membership to access all our plugins.