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/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
• formSelector
• minSearchLength
• responseFieldElements
• searchLabel
• selectClass
• submitBtn
• template

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>