Loading...
searchstack.dev
Sign In

Put search on your page

Your pages are searchable the moment the list has records — there's a live search API waiting. This is the half of the finished example your visitors touch.

Search by meaning

Because the reference list has an embedding model, you can ask it to rank by meaning with vector_search: true. Here's a question phrased the way a real visitor would — note it 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 — found by meaning, not by matching the word "versioning":

{
  "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 plain keyword matching — which struggles here, because the answer doesn't contain the words asked. That side-by-side is exactly what the box at the top of this lesson shows.

Drawing the results

Every result carries what a link needs: 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 exactly where the answer is. In a page you'd map the results to a list of links: 

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 search key scoped to read-only (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/autocomplete component wires the same list to an <input> for you; point it at reference instead of a group.

Go deeper: Search options: vector search, filters, sizing and scoring in the reference.

Top