UpStart Commerce Search

Suggest (Type Ahead)

4min

Suggest is a unique feature of NoChannel Search that allows users to complete their queries faster and as soon as they start typing. The users can funnel their search quickly and require minimum input from the user. To further facilitate the person making the query, type ahead highlights the portion of the result that matches the initial query. Suggest also gives the users the ability to jump to a results page directly i.e. the product page of the suggest.

For example, if users type the query "mat" the results will show "match box", "mattress", "door mat", and other similar words. The portions with "mat" will be highlighted.

To understand the concept of suggestion better, consider the example discussed below.

Note: Suggestion request is first transformed into OpenSearch request and then it is sent to the index for the searching process.

Using Typeahead in Route

The API call for type ahead in route is:

POST https://api.upstartcommerce.com/v1/search/routes/route_id/suggest

Notice that the end of the URL "suggest" is explicitly mentioned. Suggest uses the authorization of route. This means that if the authorization of a route is set to public, then the suggest will also be public.

The following code block represents the suggest endpoint.

JS


Following is the explanation of the important parameters involved in the code block above.

  • _source: This field defines the property that is to be returned to the user. In the above example, 'name' will be returned.
  • suggest_fields: Properties that are used for suggestions are defined in this field. Only the defined fields will be search while all the others will be ignored. In the example above, that property is 'name'.

If no values are set in the field block, then all suggestable fields are searched by default.

  • query: In this block, users can utilize the default OpenSearch queries to filter results, define filters, and other specific functionalities. Refer to this documentation to implement the various required features.
  • highlight: This field sets the highlight tag. Users can define the pre and post-tag. In the example above, both are set to strong (bold).