Coveo Querybox Component (CoveoQuerybox)

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

When the end user submits a search request, 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

Methods

Properties

Accessors

Component Options

Constructors

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). Components 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

  • Gets the current cursor position in the input.

    Returns number

    The cursor position (index starts at 0).

getDisplayedResult

  • getDisplayedResult(): Result

getResult

  • getResult(): Result

getText

  • getText(): string

resultAtCursor

  • resultAtCursor(match?: string | function): Result[]

  • Gets the result at cursor position.

    Parameters

    • Optional match: string | function

      The match condition.

    Returns Result[]

    The result.

setText

  • setText(text: string): void

  • Sets the content of the input.

    Parameters

    • text: string

      The string to set in the input.

    Returns 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

bind: ComponentEvents

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 different components. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

Contains the state of different components (enabled vs disabled). Allows to get/set values. Triggers 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.

Static ID

ID: string

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

Accessors

usageAnalytics

Component Options

enableLowercaseOperators

enableLowercaseOperators: boolean

If the enableQuerySyntax option is true, specifies whether to interpret 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.

Only effective when

enableQuerySyntax is truthy

Default

false

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

enablePartialMatch

enablePartialMatch: boolean

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

Notes:

  • Only the basic expression of the query (see q) can be converted to a partial match expression.
  • When the enableQuerySyntax option is set to true, this feature has no effect if the basic expression contains advanced query syntax (field expressions, operators, etc.).
Not supported in

Coveo for Salesforce Free

Default

false

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

enableQuerySyntax

enableQuerySyntax: boolean

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

Regardless of the value of this option, the Coveo Cloud REST Search API always interprets expressions surrounded by double quotes (") as exact phrase match requests.

See also enableLowercaseOperators.

Notes:

  • 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.

  • On-premises versions of the Coveo Search API require this option to be set to true in order to interpret expressions surrounded by double quotes (") as exact phrase match requests.

Default value is false.

Default

false

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

enableQuestionMarks

enableQuestionMarks: boolean

If enableWildcards is true, specifies whether to expand basic expression keywords containing question mark characters (?) to the possible matching keywords in order to broaden the query (see Using Wildcards in Queries).

Note:

If you are using an on-premises version of the Coveo Search API, you also need to set the enableQuerySyntax option to true in order to be able to set enableQuestionMarks to true.

Default value is false.

Only effective when

enableWildcards is truthy

Default

false

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

enableSearchAsYouType

enableSearchAsYouType: boolean

Whether to enable the search-as-you-type feature.

Note: Enabling this feature can consume lots of queries per month (QPM), especially if the searchAsYouTypeDelay option is set to a low value.

Default value is false.

Default

false

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

enableWildcards

enableWildcards: boolean

Specifies whether to expand basic expression keywords containing wildcards characters (*) to the possible matching keywords in order to broaden the query (see Using Wildcards in Queries).

See also enableQuestionMarks.

Note:

If you are using an on-premises version of the Coveo Search API, you need to set the enableQuerySyntax option to true to be able to set enableWildcards to true.

Default value is false.

Default

false

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

partialMatchKeywords

partialMatchKeywords: number

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.

Notes:

  • Repeated keywords count as a single keyword.
  • Thesaurus expansions count towards the partialMatchKeywords count.
  • Stemming expansions do not count towards the partialMatchKeywords count.
Not supported in

Coveo for Salesforce Free

Only effective when

enablePartialMatch is truthy

Minimum

1

Default

5

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

partialMatchThreshold

partialMatchThreshold: string

An absolute or relative value indicating the minimum number of partial match expression keywords an item must contain to match the expression.

See also the partialMatchKeywords option.

Notes:

  • A keyword and its stemming expansions count as a single keyword when evaluating whether an item meets the partialMatchThreshold.
  • When a relative partialMatchThreshold does not yield a whole integer, the fractional part is truncated (e.g., 3.6 becomes 3).
Not supported in

Coveo for Salesforce Free

Only effective when

enablePartialMatch is truthy

Default

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

Minimum

0

Default

50

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

triggerQueryOnClear

triggerQueryOnClear: boolean

Whether to trigger a query when clearing the Querybox.

Default value is false.

Default

false

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

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