Documentation

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:

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.

  1. Enable Ajax – does what is says
  2. Make Searches Bookmarkable – This updates your URL with JavaScript to reflect the current search/filter settings from a user – this means the URL can be shared or bookmarked to return to the exact same search results.
  3. 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.
  4. Scroll Window To – auto scroll the page to a specific area once the results have been fetched.
  5. 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: #content
    Note3: Your search form must not be inside this container
  6. 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 href attributes and fetch the results – ie: .pagination a

Setting up Infinite Scroll

Infinite Scroll