There are some caveats:
1. You must be using the LATEST version (3.x.x) of Divi (earlier versions of Divi are coded differently). Please upgrade Divi before using the method described below (make a full site backup first).
2. You must be using a fixed page for the form and results.
3. The page will typically need a CODE element – do NOT use a Text element – (where the ID 178 appears in the examples below, replace it with the ID number of your form) for 3a-3c:
3a. The form shortcode and possible the filter_next_query shortcode (see 3b), e.g.
[searchandfilter id="178"]
3b. If not in the Text/Widget area in 3a, you will need one before the results/posts block for the filter_next_query shortcode, e.g.
[searchandfilter id="178" action="filter_next_query"]
3c. This code (NOT required if you are using the Fullwidth Blog option):
<script>(function ( $ ) {
"use strict";
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
var grids = document.getElementsByClassName('et_pb_salvattore_content');
salvattore['register_grid'](grids[0]);
salvattore['recreate_columns'](grids[0]);
});
}(jQuery));</script>
3d. The Blog element.
4. The form has to be setup correctly, in Display Results and Posts pages:
4a. Set Auto Count (both settings) to ON
4b. The Display Results Mode set to Custom
4c. The Ajax Results container is set to .et_pb_blog_grid if you use the Grid mode in the Divi Blog block, or .et_pb_ajax_pagination_container if you are using the Fullwidth Blog option.
4d. If you are searching Pages, in the Posts settings, you should exclude the page ID of this page (otherwise the search page is a result in the grid!!).
.
