The Divi Search Helper provides two options for displaying your search results:
- A Divi Theme Builder Search Results template
- Live AJAX search results in a dropdown in the Search module
In this guide, we will explore the second option about using live AJAX search option. With this option enabled, the search results will show in a dropdown below the search filed immediately while someone types in a search term.
If you want to use the regular method instead, you can reference our other guide about the Theme Builder Search Results Page.
Configure The Live AJAX Search Results Dropdown Settings
To set up the live AJAX search results, open the Divi Search module settings to the Content tab and open the Search Results toggle. Here you can adjust any setting according to your needs.
Search Results Method
The first and most important thing to do is change the search results method to the live AJAX dropdown. This is the option needed to show the search results live on the page in a dropdown rather than the alternative method of showing the results on a separate Theme Builder search results page.
Search Results Order
For live results, I highly recommend choosing “Relevance” as the results order. But of course you can also choose the order in which the search results will show by publish date, alphabetical by title, or just random. You can also choose ascending or descending which would apply for the publish date and alphabetical by title.
Search Results Per Page – Pagination
The number of search results per page is set to 10 by default, but can be changed to whatever value you want. If the number of results is higher than this value, pagination links will automatically appear for the visitor to navigation through the pages of results.
Enter Custom Text For Pagination Links
These input fields provide you with the ability to enter your own custom text for the previous and next pagination links when viewing the AJAX search results.
Search Results Heading Text
When setting up the Custom Search Results Heading Text, you can use merge tags. The module has this set up by default, but here are some more examples you could try:
We found ({number_of_results}) search results for "{search_term}"
Result: We found (12) search results for “Divi”
Showing <strong>{start_from} - {end_at}</strong> of <strong>{number_of_results}</strong> Results For Your Query: <strong>"{search_term}"</strong>Result: Showing 1 – 10 of 33 Results For Your Query: “Divi”
Open The Search Results Page In A New Tab
This settings provides you with the option to open the search results page in a new tab. This feature is relevant when you are using the enter key or the button to view all search results in the Theme Builder search results page.
Minimum Search Term Length
This setting determines when to initiation the live search results when someone is typing into the search field. The default number of minimum characters is set to 1, which means the search will start as soon as one letter is typed.
Show Or Hide Elements
These settings allow you to enable or disable various elements within the individual search result items. You can show or hide the title text, image, excerpt, price, author, date, and categories.
Pagination Overlay Effect
You can also choose to show an overlay with a loader effect when clicking through the pagination.
Search Results Links
You can also make the entire search result item clickable, which is nice for user experience instead of just clicking the title text. Not only that, but you can also choose to open the search result in a new tab or the same tab.
No Results Message Custom Text
If someone types a search term that does not match any results, a message will display to inform them that no results can be found. This message can be customized according to your preference.
Click Outside Dropdown To Close
When a visitor to your site is using the search results dropdown, they may want to close the dropdown when they click anywhere else on the page. This setting allows you to you choose whether that is possible or whether you want the dropdown to remain until they clear the search term in the search field.
Show Button To View All Results
You can choose to use a hybrid search results experience, combining both the AJAX search results dropdown and the Divi Theme Builder results page. You can do this by enabling a “View All Results” button that appears at the bottom of the dropdown container, and when clicked, will link to show the results in the regular search results page. Here is an example of how it looks by default. The button has all the standard full design settings and an option to make it fullwidth.
Link To Search Results Page With Enter Key
With this option, you can press the enter key when searching, and you will be redirected to the Theme Builder search results page. This is completely optional, of course, but it is a common use case for many when using the AJAX search results dropdown, so we are excited to include this helpful feature.
Design Settings For Everything!
As you have come to expect from us, we have included design settings for every element in the live search results dropdown. This includes styling options for the dropdown container itself, as well as the individual search results. There are too many to list, but you can see them all in the settings list and a summary below:
- Design Settings For The Search Results Dropdown
- Design Settings For The Search Results Text
- Design Settings For The Search Results Pagination
- Design Settings For The Individual Search Results Image
- Design Settings For The Individual Search Results Title Text
- Design Settings For The Individual Search Results Excerpt Text
- Design Settings For The Individual Search Results Meta Text (Author, Date, Categories)
- Design Settings For The Individual Search Results Woo Price Text
