Live AJAX Search Results
If you are not familiar with our exciting Divi Search Helper plugin, you are missing out on something great! This plugin upgrades the existing Divi Search module with all the missing features like new design settings, advanced search criteria options, and improved search result pages. But we made it even more awesome! Today I am thrilled to introduce live AJAX search results! That’s right, now you can show the search results directly on the same page in a dropdown that opens from the Search field. We hope you are as excited about this as we are, and that you enjoy all the crazy features this module adds to the existing Divi search module.
SEE IT IN ACTION: We are using these new features on our main blog page! Go check it out for a live AJAX search results demo!
▶️ Please watch the video above to get all the exciting details! 👆
Learn More About Divi Search Helper!
Upgrade the existing Divi Search module with all the missing functionality and design features!
New Live AJAX Search Results
This update is all about the new live AJAX search results which show in a dropdown below the search field immediately as you are typing the search term. This feature is very popular and allows users to find posts, pages, products, etc. much faster without going to a regular search results page. The graphic below shows a visual of all the new features.
Here are some of the noteworthy new features:
All Settings Are Located In Search Module
All the settings are now located in the existing Divi Search module. In version 1.0, the settings related to the search results page were located in the Divi Theme Options.
New Search Results Settings
We added a new “Search Results” toggle which has all the settings related to the search results inside that toggle.
The first setting in the Search Results toggle is important. It is a dropdown selector to choose to use the regular search results page in the Divi Theme Builder template, or to choose the new live AJAX search results dropdown. Settings will show or hide within the Search Results toggle depending on which option you choose.
- Add A Setting To Choose The Search Results Order Criteria By Publish Date, Alphabetical By Title, Or By Random
- Add A Setting To Choose The Search Results Order As Ascending Or Descending
- Added A Setting To Set The Number Of Search Results Per Page For Pagination
- Added A Setting To Show A Pagination Overlay Loader Effect When Clicking Through The Pagination
- Added Custom Search Results Heading Text Input Textarea And Merge Tags Options
- Added A Minimum Search Term Length Setting To Determine When To Initiate The Live Search Results
- Added A Setting To Show Or Hide The Image
- Added A Setting To Show Or Hide The Title
- Added A Setting To Set The Excerpt Character Length
- Added A Setting To Show Or Hide The Price
- Added A Setting To Show Or Hide The Categories
- Added A Setting To Show Or Hide The Date
- Added A Setting To Show Or Hide The Author
- Added A Setting To Show A Pagination Overlay Loader Effect
- Added A Setting To Set The Results Link Target In The Same Tab Or New Tab
- Added A Setting To Make The Entire Search Result Clickable
- Added An Input Field To Enter Custom Text For The No Search Results Message
- Added A Setting To Choose Whether To Close The Dropdown By Clicking Outside
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 in our documentation and a summary below:
- Added Design Settings For The Search Results Dropdown
- Added Design Settings For The Search Results Text
- Added Design Settings For The Search Results Pagination
- Added Design Settings For The Individual Search Results Image
- Added Design Settings For The Individual Search Results Title Text
- Added Design Settings For The Individual Search Results Excerpt Text
- Added Design Settings For The Individual Search Results Meta Text (Author, Date, Categories)
- Added Design Settings For The Individual Search Results Woo Price Text
Important Settings Change
This message is only for existing installations using the original search results settings.
Theme Options Settings Moved!
In the original version of the plugin, we had a few settings in the Divi Theme Options for adjusting the search results page. These have moved to the module! There are several reasons for this change. It allows you to set different search result settings per Search module. It also keeps all the settings in one location in the Search module. Since this is a big change, it is important to check your search results pages to make sure the settings are configured properly. The settings should be migrated automatically, but you should double-check to be sure. You can do this by opening the Search module settings to the Theme Builder Search Results Page toggle.
Updated Features Chart For 2.0
The original version 1.0 included (25) main custom settings and features! The plugin now had (55) main custom settings and features!
| Feature | Ours | Divi |
|---|---|---|
| Search Field | ||
| Icon In Search Field | ||
| Show Icon On Left Or Right Side | ||
| Icon Design Settings | ||
| Clear Search Term Icon/Feature | ||
| Search Field Margin | ||
| Search Field Padding | ||
| Search Field Border Settings | ||
| Search Field Focus Border Settings | ||
| Search Field Box Shadow Settings | ||
| Search Button | ||
| Search Button Custom Text | ||
| Search Button Location Left Or Right | ||
| Search Button Custom Width | ||
| Search Button Margin | ||
| Search Button Padding | ||
| Search Button Border Settings | ||
| Search Button Box Shadow Settings | ||
| Hide Search Button Text | ||
| Show Search Button Icon | ||
| Search Button Icon Design Settings | ||
| Search Criteria | ||
| Select Which Post Types To Include In Search | ||
| Select Which Taxonomies To Include In Search | ||
| Keyword Criteria - Title, Excerpt, Content, Meta | ||
| Search Results | ||
| Selector To Choose Regular Or Live AJAX Search Results | ||
| Order By Criteria (Publish Date, Alphabetical By Title, Or Random) | ||
| Order Descending Or Ascending | ||
| Custom Search Results Heading Text | ||
| Merge Tags For Range And Total Results In Heading Text | ||
| Number Of Search Results Per Page For Pagination | ||
| Show Pagination Overlay Loader Effect | ||
| Full Design Settings For Pagination Text | ||
| Replace Blog No Search Results w/ Divi Library Layout | ||
| Replace Woo Products No Search Results w/ Divi Library Layout | ||
| Custom Text For No Search Results Message | ||
| Full Design Settings For No Search Results Message | ||
| Full Design Settings For The Search Results Dropdown | ||
| Option To Close Dropdown By Clicking Outside | ||
| Custom Text Input For Search Results Heading Text | ||
| Merge Tags For Range And Total Search Results Heading Text | ||
| Full Design Settings For The Search Results Heading Text | ||
| Full Design Settings For The Search Results Pagination | ||
| Minimum Search Term Length For Initiating Search | ||
| Set The Results Link Target In The Same Tab Or New Tab | ||
| Make The Entire Search Result Clickable | ||
| Full Design Settings For The Search Results Pagination | ||
| Show Or Hide The Individual Search Results Image | ||
| Full Design Settings For The Individual Search Results Image | ||
| Show Or Hide The Individual Search Results Title Text | ||
| Full Design Settings For The Individual Search Results Title Text | ||
| Show Or Hide The Individual Search Results Excerpt Text | ||
| Set The Excerpt Character Length | ||
| Full Design Settings For The Individual Search Results Excerpt Text | ||
| Show Or Hide The Individual Search Results Meta Text | ||
| Full Design Settings For The Individual Search Results Meta Text | ||
| Show Or Hide The Individual Search Results Price Text | ||
| Full Design Settings For The Individual Search Results Price Text | ||
Live Demo
We used our own module to create the live demo examples for the module! We even include the documentation as the content, so be sure to check it!
NOTE: We have not updated the demo site with the live AJAX search results yet at publishing time – it is on our to-do list!
Documentation
As with all of our products, every setting and feature of the plugin is well documented! Go check out the plugin documentation area for everything you need to know about using the module.
Learn More About Divi Search Helper
If you are not using this plugin yet, please visit the product page and learn how you can upgrade the existing Divi Search module with all the missing features provided by our addon with new design settings for the input field and button, advanced search criteria options for post types and taxonomies, improved search results page with many features, and a beautiful customizable live AJAX search results dropdown.
0 Comments