Walkthrough: Adding search functionality to your page
To enable visitors to quickly find what they are looking for, SXA comes with flexible out-of-the-box search functionality. There are different search renderings available from the Toolbox, for example, renderings that add a search box, renderings that sort or filter the search results, and so on. This makes it easy to set up a simple search solution for your site.
For example, you can add a basic search solution to your page that contains a search query box and lists the results with pagination.
You must switch to Preview mode to view the search request results of your search components.
This walkthrough describes how to:
-
Add the Search Box rendering
-
Add the Search Results rendering
-
Add the Page Selector rendering
Add the Search Box rendering
To enable your visitors to search your site, you can add a search box to your pages. By default, the Search Box rendering adds the search text box to the page. You can customize the search box by configuring the item and changing the properties.
To add a search box to your page:
-
From the Toolbox, drag the Search Box rendering to the page.
-
In the Select the Associated Content dialog box, for the search box, select the Default item.
-
To change the text of the search box on the page, in the Search Box toolbar, click Edit component configuration item.
-
In the dialog box, edit the following fields and click OK:
-
Search button text – the text of the rendering's button. If you leave this field empty, the button does not appear on the page.
-
Textbox placeholder text – the text in the search box that functions as a hint to describe the expected value.
-
Search textbox label – a title for the search rendering.
For example, the following fields:
Display the following search box on the page:
-
-
To change the Search Box rendering properties, for example, to add a search scope or tips for words to search on, in the Search Box toolbar, click More, and click Edit component properties:
-
In the Control Properties dialog box, for basic search solutions, you can leave the default values. For more complex solutions, you can edit the following fields:
-
Search results signature – enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you have more than one search result rendering on the page.
-
Target signature – if you created a separate search results page, enter the signature of the Search Results rendering on that page here.
-
Search scope – select a scope to limit the search results.
-
Max predictive results count – sets the maximum number of predictive results shown in the drop down. When you leave this field empty, no predictions are shown.
-
Search results page – select the specific search page, if you want to direct to a separate page.
NoteThe Search results page is a separate page on your website that has the Search Results component. This page acts as a landing page that shows search results when users perform a search from anywhere on your site. Typically, this page also contains other relevant search components, for example, Search Box, Page Selector, Sort Results, and some filters. If a Search Box component has the Search results page parameter configured, it redirects to this search results landing page.
-
Show search textbox – selected by default. Clear to remove the search text box.
-
Suggestions mode – select an option from the drop-down box.
The options are:
Show search results: shows the search results, rendered by rendering variants. User will be redirected to the clicked item.
Show predictions: shows search phrase predictions provided by the search engine. When the visitor clicks a search suggestion, the search is executed. This mode is supported for Solr only.
Show search results as predictions: clicked text is put in the search box and search is performed.
WarningSXA uses a suggester called
sxaSuggester
. If you set up search suggestions in Solr, make sure to use that name.
-
Add the Search Results rendering
For users to view the results of their search, you must add the Search Results rendering on the page. For simple solutions, you can have the search results appear on the same page.
To add the Search Results rendering:
-
To add a search results section to your page, from the Toolbox, drag the Search Results rendering to the page.
-
To change the text of the search box on the page, in the Search Results toolbar, click Edit component configuration item and enter the text that you want to appear when the search returns no results. Click OK.
-
To change the Search Results rendering parameters, for example, to determine how many results should be loaded at once, or how the results are sorted, in the Select the Associated Content dialog box, select the Default item.
-
In the Control Properties dialog box, edit the following fields to specify how to arrange the search results:
-
Search results signature – enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you have more than one search result rendering on the page and you only want to filter on specific search results. When you leave this field empty, it filters all Search Results renderings with no signature.
-
Search scope – select a scope to limit the search results.
-
Page size – enter the number of results you want to be loaded by the rendering.
-
Default language filtering – select the language you want to use for the search.
-
Default sort order – select the way the results are sorted on the page. This is only used when the Sort Results rendering is not used.
-
Automatically fire search when no criteria set - when selected search is not triggered until the users provides search criteria.
-
Add the Page Selector rendering
With the Page Selector rendering, you can determine how to display the results pages. The number of pages displayed depends on the default page size configured in the Search Results rendering or, if the Page Size rendering is used, on the page size configured in the Page Size rendering.
To add the Page Selector rendering:
-
From the Toolbox, drag the Page Selector rendering to the page.
-
In the Page Selector toolbar, click Edit component configuration item .
-
In the dialog box, fill in the fields and click OK.
For example, the following fields:
Appear as:
-
To change the properties of the Page Selector rendering, for example, to determine how many pages are displayed in buttons, in the Search box, click More, and click Edit component properties.
-
In the Control Properties dialog box, edit the following fields and then click OK:
-
Search results signature – if you want to filter on specific Search Results renderings, enter the signature(s) (separated by a comma) of the Search Results rendering(s) that you want to search on.
-
Collapsed mode threshold – if you expect results on many pages, you can replace some of these pages by dots.
For example, if you enter 10 in the Collapsed mode threshold field, the following is displayed for the search results:
-