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

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

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

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.

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 a 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 on a basic expression containing query syntax (field expressions, operators, etc.).

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, which implies that an item must contain all of the basic expression keywords to match the query.

not supported in

Coveo for Salesforce Free

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.

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.

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

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 a basic expression to convert it to a partial match expression.

See also the partialMatchThreshold option.

Notes:

  • This option has no meaning unless the enablePartialMatch option is set to true.
  • Repeated keywords in a basic expression count as a single keyword.
  • Thesaurus expansions in a basic expression count towards the partialMatchKeywords count.
  • Stemming expansions do not count towards the partialMatchKeywords count.

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.

not supported in

Coveo for Salesforce Free

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

partialMatchThreshold

partialMatchThreshold: string

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

See also the partialMatchKeywords option.

Notes:

  • This option has no meaning unless the enablePartialMatch option is set to true.
  • A keyword and its stemming expansions count as a single keyword when evaluating whether an item meets the partialMatchThreshold.

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

not supported in

Coveo for Salesforce Free

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