BoxHeader component

This is for:

In this article

Options
Methods
Usage

The BoxHeader component takes care of instantiating a Searchbox component with preconfigured options and a placeholder. Optionally, this component can also display a Remove context check box. You should normally place this component at the top of your box.

Options

includeSearchBox

Specifies whether to initialize a Searchbox component. The default value is true.

<div data-include-search-box='true'></div>

If this option is set to true, the component initializes a Searchbox component with the following overridden default configuration options:

All other Querybox and Omnibox options retain their original default values.

You can specify additional or different options for the Searchbox in the BoxHeader markup or when initializing the framework.

All Querybox options are available. Omnibox options become available if you set enableOmnibox to true.

Example

$('#MyBox').coveo('initBox', {
    SearchBox : {
        // You can override the Searchbox default values.
        searchAsYouTypeDelay : 650
        // You can instantiate an Omnibox instead of a Querybox by setting enableOmnibox to true.
        enableOmnibox : true
        // Querybox options are available one way or another, since the Omnibox component extends the Querybox.
        enableWildcards : true
        // You can access Omnibox options as well if enableOmnibox is true.
        enableFieldAddon : true
    }
})

[ ... ]

// If you specify different values for the same option in the initialization function and in the component markup, the markup value will override the initialization value.

<div class='CoveoBoxHeader' data-enable-search-as-you-type='false' data-enable-omnibox='false'></div>

Note

Component markup configuration applies after initialization configuration.

This means that in the previous example, the BoxHeader component would actually instantiate a Querybox and disable the search-as-you-type feature. This implies that the searchAsYouTypeDelay initialization configuration has no effect, since this option requires the enableSearchAsYouType option to be true to be applied. The enableFieldAddon configuration in the initialization function also becomes useless, as this option is specific to the Omnibox component.

placeholder

If includeSearchBox is true, specifies the placeholder you want to set in the Searchbox.

The default value is the localized string for Search.

<div data-placeholder='<MY_SEARCHBOX_PLACEHOLDER>'></div>

Where you can replace <MY_SEARCHBOX_PLACEHOLDER> by the placeholder to set in the Searchbox.

allowNonContextualSearch

If includeSearchBox is true, specifies whether to display a Remove context check box when the end user starts typing in the Searchbox input.

When checked, this check box removes the part of the query expression that might have been added by each query component.

The default value is false.

<div data-allow-non-contextual-search='false'></div>

Example

When the end user opens a case about Power Generator, items related to Power Generator are shown. If the user starts typing in the Searchbox input while the allowNonContextualSearch option is set to true, a check box will appear to allow the user to disable the query that shows items related to Power Generator, allowing them to search outside of the Power Generator scope.

Methods

This component doesn’t provide any methods.

Usage

<div class='CoveoBoxHeader'></div>