Support Menu

Coveo component Querybox

The Querybox component renders an input that the end user can interact with to enter and submit a query.

When the user submits a query by hitting the Enter key, 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 directly on an input element (i.e., <div class='CoveoQuerybox'></div> will work, but <input class='CoveoQuerybox'></input> will not).

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

Index

Component Options

autoFocus

autoFocus: boolean

Specifies whether the Querybox should get auto focus and selection upon initialization.

Default value is true.

Markup configuration example(s) :
data-auto-focus='true'
data-auto-focus='false'

enableLowercaseOperators

enableLowercaseOperators: boolean

If Querybox.options.enableQuerySyntax is true, specifies whether to treat the AND, NOT, OR and NEAR keywords in the Querybox as query operators in the query even when the end user types them in lowercase. This option applies to all query operators (see Coveo Query Syntax Reference).

Default value is false.

Example:

If this option and the enableQuerySyntax option are both true, then the Coveo Platform interprets the near keyword in a query such as service center near me as a 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 in order for the Coveo Platform to interpret it as a query operator.

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

enablePartialMatch

enablePartialMatch: boolean

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

Default value is false.

Example:

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

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

<div class='CoveoQuerybox' data-enable-partial-match='true' data-partial-match-keywords='4' data-partial-match-threshold='75%'></div>
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 such as field references in the query that the user enters in the Querybox (see Coveo Query Syntax Reference).

Setting this option to true also causes the query syntax in the Querybox to highlight.

Default value is true.

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 Querybox.options.enablePartialMatch is true, specifies the minimum number of keywords that need to be present in the basic expression to convert this expression to a partial match expression.

See also Querybox.options.partialMatchThreshold.

Default value is 5.

Note:

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

Example:

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

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

partialMatchThreshold

partialMatchThreshold: string

When Querybox.options.enablePartialMatch is true, specifies an absolute or relative (percentage) value indicating the minimum number of partial match expression keywords a document must contain in order to match the query.

See also Querybox.options.partialMatchKeywords.

Default value is 50%.

Note:

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

Examples:

If the partialMatchThreshold option is 50% and the partial match expression contains exactly 9 keywords, then documents 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, then documents will have to contain at least 6 of those keywords to match the query (50% of 12).

If the partialMatchThreshold option is 2, then documents 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.

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

searchAsYouTypeDelay

searchAsYouTypeDelay: number

If Querybox.options.enableSearchAsYouType is true, specifies the delay (in milliseconds) between a key press and a query being triggered.

Default value is 500. 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 the Querybox is cleared.

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. Creates a new Coveo.Magicbox instance and wraps the Magicbox methods (onblur, onsubmit etc.). Binds event on buildingQuery and on 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 ResultLayout 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