Search box widget

You use the built-in Next.js search widgets to display a search box and search results on your website. You use the Search box and Search results widgets to enable the users of your website to search for content.

PREREQUISITES: You created at least one search index. For more information, see Create search indexes.

You can place a Search box widget only inside a Section widget.
To do this, perform the following:

1. Inside a column from the Section widget, click Add widget here…
2. Select the Navigation & Search tab.
3. Click the SEARCH BOX widget.
   The widget is placed inside the selected column of the Section widget.
4. Click Set where to search.

1. In Specify content to search in, select the search index that you want to use for this search box.
   The search index is a predefined set of search content. For example, you can create a search index that contains all news. When a user enters a search word, it is applied to all news items on your website.

   NOTE: Next.js Search widget does not search the HTML of the page.

2. Under Search results page, click  (Select page) and select a page from your website that will display the search results.

   NOTE: You can select the page where the Search box is located, as well as any other page.

   IMPORTANT: You must add the Next.js Search results widget to the page that will display the search results.

3. In Display suggestions after typing..., select the minimum number of characters that the user must enter, after the search box displays search result suggestions.
   Select between the predefined values of None, 2, 3, 4.

   NOTE: In the advanced settings, you can configure the which fields to use for the search suggestions.

PREREQUISITES: You see the Boost search results section only when you are using Azure Search.

You use the Boost search results section to configure additional parameters for Azure Search:

• Scoring profile
  Scoring profiles are part of the search index and consist of weighted fields, functions, and parameters. 
  Use scoring profiles to boost search results by customizing the way different fields are ranked.
• Scoring parameters
  Scoring parameters are part of the scoring functions within a scoring profile.
  Add scoring parameters to boost content to appear higher in the search results by specifying the parameter's name and value.

In Display setting section, you can do the following:

• Change the template
  To change the template that the Search box widget uses, select the new template in the Search box template dropdown box.

  You must first have created a custom template.
  For more information, see Next.js pages and templates.

• Configure the widget margins
  In Margins, you can choose the margins between the text and the column where it is placed.
  Choose from the predefined values of none, small, medium, or large.

Save your changes.

To open the advanced settings, in the upper-right corner of the Search box page, click  (Advanced settings).

• In Label, you can enter a specific name for this widget.
  This name will be displayed in:
  • The page editor as a label for the widget
  • In the treeview with the page structure in the right pane of the page editor.
• In CSS class, you can enter individual CSS class for the Search box widget.
• In Suggestion fields, you can enter the fields that the search suggestion will use to suggest search results while the user types in the search box.

  NOTE: These fields must be included in the search index that you chose for this search box.
  For more information, see Create search indexes.

In the Labels & Messages section, you can do the following:

• In Search box placeholder text, you can enter some text to orientate the user that this is a search box.
  For example, you can enter Search….This text is only a guidance for the user and is not submitted as a search term.
• In Search button, enter the label foe the search button that the user clicks to submit the search keyword.

Save your changes.