Do you want to add an Ajax lazy load to the search result in Elementor? Adding a lazy load to the search result can improve the result load time as it will load a limited number of results, and once the user scrolls down it will load more results.
With the Search Bar widget from The Plus Addons for Elementor, you can easily add a lazy load feature to the Ajax search result.
To check the complete feature overview documentation of The Plus Addons for Elementor Search Bar widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
To do this, add the Search Bar widget on the page or template and follow the steps –
1. Open the item under Search Bar then select the appropriate source and type for search.
2. Now go to Extra Option tab and make sure the AJAX Search is enabled.
Note: The AJAX Search will be enabled by default.
3. Then go to the Load More/Lazy Load tab, and select Lazy Load from the Loading Options dropdown.
From the Loading Text field, you can customize the text that appears when more items are being loaded, while from the All Posts Loaded Text field, you can customize the message that appears when all items are loaded.
Then, from the More posts on click/scroll field, you can set how many items will load at once on scroll.
4. After that, go to the Results Area tab, and from the Posts Per Page section, you can set how many items will load in the initial search result.
Depending on the total number of items and the number set in the Posts Per Page field, you’ll see more items loading automatically as you scroll down.
Note: To have a lazy load, you must set a lower number in the Posts Per Page field than the total number of search result items.
Also, read How to Add Ajax Pagination to Search Result in Elementor.
