Predictive search

As a section (recommended)

Render a section with predictive_search and swap it in under the search box:

const q = encodeURIComponent(input.value.trim());
const html = await (await fetch(`/search/suggest?q=${q}&resources[type]=product,collection,query&resources[limit]=4&section_id=predictive-search`)).text();

sections/predictive-search.liquid

{%- if predictive_search.performed -%}
  <ul role="listbox">
    {%- for product in predictive_search.resources.products -%}
      <li role="option"><a href="{{ product.url }}">{{ product.title | highlight: predictive_search.terms }}</a></li>
    {%- endfor -%}
  </ul>
{%- endif -%}

As JSON

const data = await (await fetch(`/search/suggest.json?q=${q}&resources[type]=product&resources[limit]=6`)).json();
data.resources.results.products; // [{ id, title, handle, url, price, available, vendor, image }]

results has products, collections, pages, articles and queries (suggested searches, with text, styled_text and url).

Parameters

Parameter	Default
q		The search terms.
resources[type]	all	product, collection, page, article, query, comma-separated.
resources[limit]	4	Results per type, at most 10.

Arabic searches ignore diacritics and tatweel, and treat alef forms (أ إ آ), taa marbuta and alef maqsura alike, so عطر finds عِطر and اسورة finds أسورة. Arabic-Indic digits match Western ones.

Good practice

• Wait about 250 ms after the last keystroke, and cancel the previous request with an AbortController.
• Use role="combobox" on the input and aria-activedescendant for keyboard selection.
• Link the “See all results” row to routes.search_url with the same q.