QuickSearch widget

Overview

The quickSearch widget is a custom autocomplete widget that populates a list of suggested search terms for a given field.

The suggest widget source is <Magento_Search_module_dir>/view/frontend/web/js/form-mini.js.

Initialize the quickSearch widget

For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.

Options

autocomplete

Attaches the autocomplete attribute to the search field.

Type: String

Default value: off

Accepted values: off, on

formSelector

The form selector containing the search input field.

Type: String

Default value: No form by default.

minSearchLength

Minimum number of characters required before the auto suggest triggers.

Type: Integer

Default value: 2

responseFieldElements

Selector for the response elements.

Type: String

Default Value: ul li

searchLabel

Selector of a search input label.

Type: String

Default value: [data-role=minisearch-label]

selectClass

Class assigned to the selected suggested term.

Type: String

Default value: selected

submitBtn

Disable the submit button.

Type: String

Default value: button[type="submit"]

template

Template responsible for rendering returned data (suggested terms).

Type: String

Default value:

1
2
3
4
5
6
7
8
<li class="<%- data.row_class %>" id="qs-option-<%- data.index %>" role="option">
    <span class="qs-option-name">
       <%- data.title %>
    </span>
    <span aria-hidden="true" class="amount">
       <%- data.num_results %>
    </span>
</li>

isExpandable

The isExpandable option is used to show and hide search input field on devices with max width 768px.

Type: Boolean

Default value: null

suggestionDelay

The suggestionDelay option prevents spamming the server with requests by waiting till the user has stopped typing for period of time.

Type: Integer

Default value: 300