Support Menu

Coveo component Querybox

Coveo Querybox Component (CoveoQuerybox)

The Querybox component renders an input which the end user can interact with to enter and submit queries.

When the user submits a query, the Querybox component triggers a query and logs the corresponding usage analytics data.

For technical reasons, it is necessary to instantiate this component on a div element rather than on an input element.

See also the Searchbox component, which can automatically instantiate a Querybox along with an optional SearchButton component.

Index

Component Options

enableLowercaseOperators

enableLowercaseOperators: boolean

If the enableQuerySyntax option is true, specifies whether to treat the AND, NOT, OR, and NEAR keywords in the Querybox as query operators in the query, even if the end user types those keywords in lowercase.

This option applies to all query operators (see Coveo Query Syntax Reference).

Example:

If this option and the enableQuerySyntax option are both true, the Coveo Platform interprets the near keyword in a query such as service center near me as the NEAR query operator (not as a query term).

Otherwise, if the enableQuerySyntax option is true and this option is false, the end user has to type the NEAR keyword in uppercase for the Coveo Platform to interpret it as a query operator.

Default value is false.

Markup configuration example(s) :
data-enable-lowercase-operators='true'
data-enable-lowercase-operators='false'

enablePartialMatch

enablePartialMatch: boolean

Specifies whether to automatically convert any basic expression containing at least a certain number of keywords (see the partialMatchKeywords option) to a partial match expression, so that items containing at least a certain subset of those keywords (see the partialMatchThreshold option) will match the query.

Example:

With the following markup configuration, if a basic expression contains at least 4 keywords, items containing at least 75% of those keywords (round up) will match the query.

<div class='CoveoQuerybox' data-enable-partial-match='true' data-partial-match-keywords='4' data-partial-match-threshold='75%'></div>

For instance, if the basic expression is Coveo custom component configuration help, items containing all 5 of those keywords, or 4 of them (75% of 5 rounded up) will match the query.

Default value is false.

Markup configuration example(s) :
data-enable-partial-match='true'
data-enable-partial-match='false'

enableQuerySyntax

enableQuerySyntax: boolean

Specifies whether the Coveo Platform should try to interpret special query syntax (e.g., @objecttype=message) when the end user types a query in the Querybox (see Coveo Query Syntax Reference). Enabling query syntax also causes the Querybox to highlight any query syntax.

Note:

End user preferences can override the value you specify for this option.

If the end user selects a value other than Automatic for the Enable query syntax setting (see the enableQuerySyntax option of the ResultsPreferences component), the end user preference takes precedence over this option.

Default value is false.

Markup configuration example(s) :
data-enable-query-syntax='true'
data-enable-query-syntax='false'

enableQuestionMarks

enableQuestionMarks: boolean

Specifies whether the Coveo Platform should expand keywords containing question mark characters (?) to the possible matching keywords in order to broaden the query (see Coveo Query Syntax Reference).

Default value is false.

Markup configuration example(s) :
data-enable-question-marks='true'
data-enable-question-marks='false'

enableSearchAsYouType

enableSearchAsYouType: boolean

Specifies whether to enable the search-as-you-type feature.

Default value is false.

Markup configuration example(s) :
data-enable-search-as-you-type='true'
data-enable-search-as-you-type='false'

enableWildcards

enableWildcards: boolean

Specifies whether the Coveo Platform should expand keywords containing wildcard characters (*) to the possible matching keywords in order to broaden the query (see Coveo Query Syntax Reference).

Default value is false.

Markup configuration example(s) :
data-enable-wildcards='true'
data-enable-wildcards='false'

partialMatchKeywords

partialMatchKeywords: number

When the enablePartialMatch option is true, specifies the minimum number of keywords that need to be present in the basic expression to convert it to a partial match expression.

See also the partialMatchThreshold option.

Note:

Only the basic expression of the query (see q) can be converted to a partial match expression.

Example:

If the partialMatchKeywords value is 7, the basic expression will have to contain at least 7 keywords to be converted to a partial match expression.

Default value is 5.

Markup configuration example(s) :
data-partial-match-keywords='10'

partialMatchThreshold

partialMatchThreshold: string

When the enablePartialMatch option is true, specifies an absolute or relative (percentage) value indicating the minimum number of partial match expression keywords an item must contain to match the query.

See also the partialMatchKeywords option.

Note:

The relative threshold is always rounded up to the nearest integer.

Examples:

If the partialMatchThreshold value is 50% and the partial match expression contains exactly 9 keywords, items will have to contain at least 5 of those keywords to match the query (50% of 9, rounded up).

With the same configuration, if the partial match expression contains exactly 12 keywords, items will have to contain at least 6 of those keywords to match the query (50% of 12).

If the partialMatchThreshold value is 2, items will always have to contain at least 2 of the partial match expression keywords to match the query, no matter how many keywords the partial match expression actually contains.

Default value is 50%.

Markup configuration example(s) :
data-partial-match-threshold='foo'

searchAsYouTypeDelay

searchAsYouTypeDelay: number

If the enableSearchAsYouType option is true, specifies how long to wait (in milliseconds) between each key press before triggering a new query.

Default value is 50. Minimum value is 0

Markup configuration example(s) :
data-search-as-you-type-delay='10'

triggerQueryOnClear

triggerQueryOnClear: boolean

Specifies whether to trigger a query when clearing the Querybox.

Default value is true.

Markup configuration example(s) :
data-trigger-query-on-clear='true'
data-trigger-query-on-clear='false'

Methods

clear

  • clear(): void

debugInfo

  • debugInfo(): any

disable

  • disable(): void
  • Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Component are enabled by default on creation.

    Returns void

enable

  • enable(): void
  • Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

    Returns void

getBindings

getCursor

  • getCursor(): number

getDisplayedResult

  • getDisplayedResult(): Result

getResult

  • getResult(): Result

getText

  • getText(): string

resultAtCursor

  • resultAtCursor(match?: string | function): Array<Result>
  • Gets the result at cursor position.

    Parameters

    • Optional match: string | function

      The match condition.

    Returns Array<Result>

    The result.

setText

  • setText(text: string): void

submit

  • submit(): void
  • Adds the current content of the input to the query and triggers a query if the current content of the input has changed since last submit.

    Also logs the serachboxSubmit event in the usage analytics.

    Returns void

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
    If there is multiple component bound to the current HTMLElement, you must specify the component class.

    Parameters

    • element: HTMLElement

      HTMLElement for which to get the bound component.

    • Optional componentClass: any

      Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

    • Optional noThrow: boolean

      Boolean option to tell the method to not throw on error.

    Returns BaseComponent

Properties

bind

Allows the component to bind events and execute them only when it is enabled.

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Contains the state of options for differents component. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

Contains the state of different component (enabled vs disabled). Allows to get/set values. Trigger component state event when modified. Each component can listen to those events.

disabled

disabled: boolean

A disabled component will not participate in the query, or listen to ComponentEvents.

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

queryStateModel: QueryStateModel

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

root

root: HTMLElement

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

A reference to the root of every component, the SearchInterface.

usageAnalytics

usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

The static ID that each component need to be identified.
For example, SearchButton -> static ID : SearchButton -> className : CoveoSearchButton

Constructors

constructor

  • Creates a new Querybox component. Creates a new Coveo.Magicbox instance and wraps the Magicbox methods (onblur, onsubmit etc.). Binds event on buildingQuery and before redirection (for standalone box).

    Parameters

    • element: HTMLElement

      The HTMLElement on which to instantiate the component. This cannot be an HTMLInputElement for technical reasons.

    • Optional options: IQueryboxOptions

      The options for the Querybox component.

    • Optional bindings: IComponentBindings

      The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

    Returns Querybox