Search Results & Ajax
To control how the display of your results, or which kind of queries should be linked to, head to the Display Results tab.
Display Results Method
This settings 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:
Shortcode vs Archive
This does not apply if you are using WooCommerce or Easy Digital Downloads display methods.
There are a few things to note when considering displaying results using Shortcode or Archive methods
* Both methods allow you to customise results via templates in your theme folder, check the links above for more details as each method is different.
- The shortcode method allows you to conveniently position where the Search Results appear in your site
- Requires minimal configuation setup and better compatibility with other plugins – its runs its own query to perform a search – which means other plugins that modify queries are not as likely to intefer with the search results.
- Faster searches when using Ajax –
- Only a demo template is supplied – you will likely need to customise the template in order for seamless integration with the styling of your theme.
- Use existing templates within your theme to display your results – super easy styling of results and instant integration with your theme.
- Ajax is slower
- Themes that do not respect the Template Hierarchy, or use custom queries within templates rather than using The Main Loop may not work – there are some suggestions & workarounds provided in the FAQs on how you might overcome this.
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: