QuickSearch widget

The quickSearch widget is an 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
• destinationSelector
• isExpandable
• formSelector
• minSearchLength
• responseFieldElements
• searchLabel
• selectClass
• submitBtn
• suggestionDelay
• template
• url

autocomplete

Attaches the autocomplete attribute to the search field.

Type: String

Default value: off

Accepted values: off, on

destinationSelector

The element’s selector where the results will be added.

Type: String

Default value: null

isExpandable

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

Type: Boolean

Default value: null

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

suggestionDelay

The suggestionDelay option prevents overloading the server with requests by waiting until the user has stopped typing for the specified period of time.

Type: Integer

Default value: 300

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>

url

The endpoint URL for processing the search query.

Type: String

Default value: null

Code sample

This example shows how to initialize the quickSearch widget and pass options during the initialization.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form class="" id="new_search_form" action="/catalogsearch/result/" method="get">
   <div class="field search">
      <div class="control">
          <input id="new-search"
              data-mage-init='{"quickSearch":{
                     "formSelector":"#new_search_form",
                     "minSearchLength": 1,
                     "url":"/search/ajax/suggest",
                     "destinationSelector":"#search_results"}
                    }'
              type="text"
              name="q"
              placeholder="<?= $block->escapeHtmlAttr(__('Search entire store here...')) ?>"
              class="input-text"/>
         <div id="search_results" class="search-autocomplete"></div>
      </div>
  </div>
  <div class="actions">
    <button type="submit"
            title="<?= $block->escapeHtml(__('Search')) ?>"
            class="action search"
            aria-label="Search">
      <span><?= $block->escapeHtml(__('Search')) ?></span>
    </button>
  </div>
</form>

Result

The result is an input with autocomplete results, where the results will be returned by the url option that was provided on initialization, as shown here: