The Search Bar component is part of the Jint Search ecosystem. It enables users to quickly access relevant content based on their input and can be configured in various ways depending on your needs.
This article presents its main features, common use cases, and available configuration options.

Overview of the Component

The Search Bar is the primary input area for users. It can be used as a standalone element or combined with other Jint search components such as the Search Results or Search Filter components.

👉 For a full overview of Jint Search features and its global use cases, refer to the article Jint Search Center.

Use Cases

The Search Bar can be configured to support three main scenarios:

• Integrated Search Center on a page: combined with a Search Results component.

• Redirection to a Search Center: user queries redirect to another SharePoint page configured as a search hub.

• Native SharePoint search: the query redirects users to the native SharePoint search experience, as defined in local or global search settings.

Adding the Component

To insert a Search Bar on a SharePoint page:

1. Switch the page to Edit mode by clicking Edit.

2. At the desired location, click the + button to open the component catalog.

3. Search for the Search Bar component under Documents, Lists, and Libraries.

4. Add it to your page.

Available Settings

The component offers four categories of configuration options:

1. Layout

2. Component Connection

3. Search Bar

4. Display Options

1. Layout

Theme – Two options are available:

• Classic

• Glassmorphism

Glassmorphism theme

Classic Theme

Size – Adjust the width of the search bar as needed.

2. Component Connection

If the search bar is placed on the same page as a Search Results component, the connection is established automatically when only one Search Results component exists on the page.
If several Search Results components are present, select the desired one from the dropdown list.

👉 Each component has a unique ID to make identification easier.

⚠️ Note: Connections are not required when the search redirects to SharePoint or another page.

3. Search Bar Behavior

The Search Bar can operate in three distinct modes.
The selected mode determines how and where results are displayed.

a) Within a Search Results Component

This is the standard configuration.

The Search Bar is linked to one or more Jint components (Search Results, Search Filter, etc.).
User-entered keywords are used to query the search index, and the results appear directly in the linked component on the same page.

This mode is ideal for building a fully integrated search experience within a SharePoint page.

b) Within SharePoint Search

In this mode, user queries automatically redirect to the native SharePoint search experience.

By default, results are displayed in the search center defined in the site collection’s search settings; otherwise, SharePoint’s global search settings are used.

You can access these settings via:
Site Settings → Search → Search Settings → Search Center URL

⚠️ Important:
If you define a custom SharePoint page as your Search Center, it must include a Search Bar and a connected Search Results component.
Without this configuration, searches cannot be processed, and no results will appear.

c) Redirect to a Specified Page

This mode allows you to define a specific URL where users will be redirected when performing a search.

The target page must include:

• a Search Bar, and

• a connected Search Results component.

Without this setup, the search query will not return results.

This mode is useful if you want to centralize the search experience on a dedicated page, separate from the origin page.

4. Display Options

Display options allow you to customize the look and feel of your Search Bar.

Background Image and Color

You can set a background image for the component and choose how it is adjusted or anchored within the space.

Alternatively, you can define a solid color or gradient, using either theme colors or a custom color via the color picker.

• Border Radius

You can adjust the corner rounding of elements in your Search Bar.

• Shadow

You can choose to add a shadow around your component for visual depth.

• Title and Placeholder

Define the title and placeholder text (watermark) for the Search Bar.