👐 HAN-DS

# Topsearch API

Wordt gebruikt op elke pagina, bijv 500.html.

# API endpoint

Op het element .js-topsearch staat een data-url attribuut. Dit geeft de api-endpoint aan:

<div class="js-topsearch" data-url="/.netlify/functions/topsearch">…</div>

# Request payload

Er gaat een post met de volgende payload naartoe:

{
  "q": "foo"
}

# API JSON response

De topsearch verwacht de volgende JSON als response van api.

Bij een lege query (?q=) komen er 5 suggesties. Deze worden gebruikt om de meest gezochte termen direct te pushen. Resultaten zijn in dit geval leeg. Korte labels zijn gewenst.

{
  "query": "",
  "suggestions": [
    { "label": "Alle opleidingen", "link": "/opleidingsoverzicht.html" },
    { "label": "Open dagen", "link": "/open-dagen.html" },
    { "label": "Vakanties", "link": "/vakanties.html" },
    { "label": "Bedrijven", "link": "/bedrijven.html" },
    { "label": "Contact", "link": "/contact.html" }
  ],
  "results": [],
  "totalResults": null
}

image

Bij een gevulde query (?q=eco) komen er maximaal 7 resultaten. Suggesties zijn in dit geval leeg.

Het is waarschijnlijk in sommige gevallen nodig 'zoekmachine-vriendelijke' labels voor bijv. opleidingen aan te bieden, zodat er onderscheid is tussen 'economie deeltijd', 'economie voltijd' etc…i.p.v 'economie' en 'economie'.

{
  "query": "eco",
  "suggestions": [],
  "results": [
    { "label": "Economie", "link": "https://www.google.com" },
    { "label": "economische", "link": "https://www.google.com" },
    { "label": "economische opleidingen", "link": "https://www.google.com" },
    { "label": "economische opleidingen werken", "link": "https://www.google.com" },
    { "label": "ecologische", "link": "https://www.google.com" },
    { "label": "Economie Hogeschool", "link": "https://www.google.com" },
    { "label": "Economie Overzicht", "link": "https://www.google.com" }
  ],
  "totalResults": 22
}

image

# Results

Required Key Type Description
x query {String} Gezochte query
x suggestions {Array} Lege array of gevuld met SuggestionObject
x results {Array} Lege array of gevuld met ResultObject
x totalResults {Integer} totaal aantal resultaten

# SuggestionObject

Required Key Type Description
x label {String} Suggestie label
x link {String} Link naar de pagina

# ResultObject

Required Key Type Description
x label {String} Resultaat label
x link {String} Link naar de pagina

←