Autocomplete

A shopper who has typed "ecks" wants to see where it leads before typing on. A request on the autocomplete surface completes it with the catalog's own words:

curl -s 'http://127.0.0.1:7800/v1/search?on=autocomplete&query=ecks' | jq -c '.suggestions[]'

{"text":"Ecksofa"}
{"text":"Ecksofa","scope":{"category":"wohnen/sofas","title":"Sofas"}}

"Ecksofa" is a corner sofa. The first suggestion searches the word, the second searches it among the sofas.

Text and scoped suggestionsCopy Anchor Link

The trace's suggest step says where each suggestion comes from:

curl -s 'http://127.0.0.1:7800/v1/search?on=autocomplete&query=ecks&debug=1' \
  | jq -r '.trace.steps[] | select(.step == "suggest") | .suggestions[].source'

the word "Ecksofa" of 1 product titles, a compound of the head "sofa"
the word "Ecksofa" of 1 product titles, a compound of the head "sofa", in the category wohnen/sofas, where 1 of them sit

• Text suggestions complete what was typed with category titles, brand names, the labels of the values a query is read for, and the words of product titles. Up to five come first, the one most products hold first.
• Scoped suggestions search the first text suggestion that sits in categories within up to two of them, the category most of its products sit in first.

A scoped suggestion searches its text with its category chosen:

{ "query": "Ecksofa", "filters": { "category": { "within": "wohnen/sofas" } } }

Reference: suggestions · suggest

Products and categories at onceCopy Anchor Link

The answer carries a search's sections too, so one request fills a search box with suggestions, products, categories and guides:

curl -s 'http://127.0.0.1:7800/v1/search?on=autocomplete&query=sof&per_page=3' \
  | jq -c '.suggestions, (.sections[] | select(.total > 0) | {type, hits: [.hits[].entity]})'

[{"text":"Sofas"}]
{"type":"category","hits":["category:wohnen/sofas"]}
{"type":"product","hits":["product:SOFA-ASKA-2","product:SOFA-LUND-3","product:SOFA-NIKO-SCHLAF"]}
{"type":"content","hits":["content:guide-sofa-finden","content:guide-teppichgroesse"]}

per_page sets how many products come along. The sections beside them show up to 6 hits each, in the order a search shows them.

Reference: sections · per_page

No redirect while typingCopy Anchor Link

A search for "sofa" lands on the sofa page. The same text in the search box stays where it is:

curl -s 'http://127.0.0.1:7800/v1/search?query=sofa' | jq -c '.redirect'
curl -s 'http://127.0.0.1:7800/v1/search?on=autocomplete&query=sofa' | jq -c '.redirect'

{"url":"/wohnen/sofas?from=sofa","entity":"category:wohnen/sofas"}
null

A shopper reaches the page a query names when they submit it, never while typing. A rule's redirect follows the rule's own when: one without on answers in the search box too, so a rule meant for submitted searches names "on": "search".

Reference: redirect · when.on

In a storefrontCopy Anchor Link

The client's suggestions store asks after a 100 ms pause in typing and drops an answer for text the shopper has already typed past:

import { createSearch } from "@orbsearch/client";

const search = createSearch({ endpoint: "http://127.0.0.1:7800" });
const box = search.suggestions({ locale: "de", per_page: 3 });

box.subscribe(() => {
    const { response } = box.current();
    for (const { text, scope } of response?.suggestions ?? []) {
        console.log(scope ? `${text} in ${scope.title}` : text);
    }
});
box.type("ecks");

current() and subscribe() have the shape React's useSyncExternalStore reads. SearchBox from the React components runs on this store and lists the suggestions, products and links in one list a keyboard moves through.

A search box has a tighter budget than a search: 15 ms at p95, measured at the server, against a search's 30 ms.

Reference: Timings

NextCopy Anchor Link

• Search and browse: what the search a suggestion leads to answers.
• React components: the search box ready to use.
• How search understands a query: what a submitted query names.