Search Results & Ajax
To control the display of your results, or which kind of queries should be linked to, head to the Display Results tab.
Display Results Method
This setting is probably the most important on this screen – and depending on your choice will affect the rest of the setup procedure.
The following options underneath will auto show/hide depending on your selection however some elements are required for all display results methods.
See for further info on each check the following resources:
- As a Post Type Archive
- Using a Shortcode
- WooCommerce Shop
- Edd Downloads Shortcode
- Custom Layouts visual builder
- As an Archive – this will be replaced in the upcoming v3
Setting Up Ajax
For most of the display methods setting up Ajax is pretty much the same it requires a basic knowledge and understanding of CSS and CSS selectors – jQuery knowledge is a bonus.
- Enable Ajax – does what is says
- Only Use Ajax on the Results Page – When the Search form is placed in a sidebar for example, it is possible that it is available on many pages of the site where there is are no results. The first interaction with the Search Form will cause a submit and redirect to the Search Results page – enabling this is recommended.
Advanced users can disable this to fetch results from other pages and load them in the current page
Note: both the current page (that page where the form is visible & submitted) and the actual results page must contain the same Results Container and Pagination selector.
- Scroll Window To – auto scroll the page to a specific area once the results have been fetched.
- Results Container – this is a CSS ID or Class which contains your results – the results are fetched via ajax using this selector, and loaded in to the current page matching using the same selector. You must find out which CSS selector is the correct one in your setup – or you should add an ID to area where your results are displayed and use that.
Note: Your pagination must also be contained inside this selector
Note2: The results container must only appear on your page once, so its best to use and ID for this – eg:
#contentNote3: Your search form must not be inside this container
- Pagination Selector – So Search & Filter can recognise your pagination and updated the results with ajax, you must enter a CSS selector that matches your pagination – its must be on the anchor tags itself so it can grab the
hrefattributes and fetch the results – ie: