Put search on your page
The list has records, so a live search API is already waiting.
Search by meaning
Because the reference list has an embedding model, vector_search: true ranks by meaning. This question shares no words with the page it should find:
POST https://api.searchstack.dev/search/Demo/reference/1
X-API-Key: {your key}
Content-Type: application/json
{ "query": "change fields without breaking my app", "size": 6, "vector_search": true }
The top result is the Versioning page:
{
"results": [
{
"name": "Versioning — What creates a new version?",
"fields": {
"content": "A change that could break an app already reading your data creates a new version…",
"url": "https://searchstack.dev/reference/versioning#what-creates-a-new-version",
"page": "searchstack.dev/reference/versioning"
}
}
],
"count": 6,
"total_count": 67
}
Flip vector_search to false and the same query falls back to keyword matching, which struggles here because the answer doesn't contain the words asked.
Drawing the results
name is the page title plus the section heading (“Versioning — What creates a new version?”) and url is a deep link straight to that section, so a click opens the page where the answer is:
const res = await fetch('https://api.searchstack.dev/search/Demo/reference/1', {
method: 'POST',
headers: { 'X-API-Key': 'YOUR_SEARCH_KEY', 'Content-Type': 'application/json' },
body: JSON.stringify({ query, size: 6, vector_search: true }),
});
const { results } = await res.json();
for (const r of results) {
addLink(r.name, r.fields.url); // deep link to the exact section
}
- Use a key scoped to
search-result:read— it ships in your page, so keep it read-only. - For an as-you-type box rather than a results page, the
@searchstack/autocompletecomponent wires the same list to an<input>; point it atreferenceinstead of a group.
Go deeper: Search options: vector search, filters, sizing and scoring in the reference.